Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Styling the TableNode focused state using the WPF styling system (Read 4679 times)
Kostya
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Aug 5th, 2014
Styling the TableNode focused state using the WPF styling system
Oct 27th, 2014 at 1:44pm
Print Post  
Hi,

I'm trying to set the most of properties for the TableNode using the WPF styling system. Some properties works fine, but I would also wanted to apply a shadow and change its color if the TableNode is focused. In fact, to use the style for the focused rectangle or set it using trigger. Instead of drawing it from the DrawAdjustmentHandles event handler. How best to do this using the WPF styling?

Thanks,
-Kostya
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Styling the TableNode focused state using the WPF styling system
Reply #1 - Oct 28th, 2014 at 8:37am
Print Post  
Hi,

Try this:

Code
Select All
<Style x:Key="TableStyle" TargetType="diag:TableNode">
	<Setter Property="Effect"  >
		<Setter.Value>
			<DropShadowEffect
				ShadowDepth="0"
				BlurRadius="8" />
		</Setter.Value>
	</Setter>
</Style>

<Style x:Key="TableFocused" TargetType="diag:TableNode">
	<Setter Property="Effect">
		<Setter.Value>
			<DropShadowEffect
				Color="Yellow"
				ShadowDepth="0"
				BlurRadius="12" />
		</Setter.Value>
	</Setter>
</Style>

private void OnNodeSelected(object sender, NodeEventArgs e)
{
	var table = e.Node as TableNode;
	if (table != null)
		table.Style = (System.Windows.Style)FindResource("TableFocused");
}

private void OnNodeDeselected(object sender, NodeEventArgs e)
{
	var table = e.Node as TableNode;
	if (table != null)
		table.Style = (System.Windows.Style)FindResource("TableStyle");
}

private void OnNodeCreated(object sender, NodeEventArgs e)
{
	var table = e.Node as TableNode;
	if (table != null)
	{
		table.ClearValue(EffectProperty);
		table.HandlesStyle = HandlesStyle.Invisible;
	}
} 



If you prefer using a single style with a trigger, you could define an attached property, e.g. MyWindow.FocusedTable to use as trigger property, and set it for e.Node from NodeSelected and NodeDeselected events.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Kostya
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Aug 5th, 2014
Re: Styling the TableNode focused state using the WPF styling system
Reply #2 - Oct 29th, 2014 at 9:07am
Print Post  
Hi Stoyan,

Thanks! It works but raises a couple of new issues though.

1)The first table node looks good. But after adding the second node, the application saves the diagram (its previous state) for Undo/Redo system:
Code
Select All
diagram.SaveToXml(xmlDoc);
 


And there is an exception:
Code
Select All
An unhandled exception of type 'System.Runtime.Serialization.SerializationException' occurred in PresentationCore.dll

Additional information: Type 'System.Windows.Media.Effects.DropShadowEffect' in Assembly 'PresentationCore, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' is not marked as serializable.
 


The question is how to serialize the diagram if we use DropShadowEffect class which is not serializable?

2)After applying the shadow the table node looks smoothed (lines/text). UseLayoutRounding partially solves the problem but lines still a little fuzzy. I remember that corrected a similar issue by applying an effect to one of the layers, say to a border, instead of an entire object. But here I can not do so.

Thanks,
-Kostya
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Styling the TableNode focused state using the WPF styling system
Reply #3 - Oct 29th, 2014 at 10:48am
Print Post  
Hi,

Is there any reason not to use built-in undo support for 1? Style serialization works only if property values are serializable. If they aren't, the control raises SerializeTag event before throwing the exception, so you could work around that like this:

Code
Select All
void OnSerializeTag(object sender, SerializeTagEventArgs e)
{
	if (e.PropertyName == "Value" &&
		e.Tag is DropShadowEffect)
	{
		var shadow = (DropShadowEffect)e.Tag;
		e.Representation.SetAttribute("Type", "-2");
		e.Context.WriteColor(shadow.Color, "Color", e.Representation);
		e.Context.WriteDouble(shadow.BlurRadius, "BlurRadius", e.Representation);
		e.Handled = true;
	}
}

void OnDeserializeTag(object sender, SerializeTagEventArgs e)
{
	if (e.PropertyName == "Value" &&
		e.Representation.Attributes["Type"] != null &&
		e.Representation.Attributes["Type"].Value == "-2")
	{
		var shadow = new DropShadowEffect();
		shadow.Color = e.Context.ReadColor("Color", e.Representation);
		shadow.BlurRadius = e.Context.ReadDouble("BlurRadius", e.Representation);
		e.Tag = shadow;
		e.Handled = true;
	}
} 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Styling the TableNode focused state using the WPF styling system
Reply #4 - Oct 29th, 2014 at 12:28pm
Print Post  
2) I can't see any fuzzy lines and text, but that might depend on MeasureUnit value, screen resolution or shadow's BlurRadius. What happens if you set table.SnapsToDevicePixels = true?
  

Untitled_011.png ( 463 KB | 198 Downloads )
Untitled_011.png
Back to top
 
IP Logged
 
Kostya
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Aug 5th, 2014
Re: Styling the TableNode focused state using the WPF styling system
Reply #5 - Oct 29th, 2014 at 2:58pm
Print Post  
Hi Stoyan,

Thank you for your help! On the second question, I could use build-in undo support actually but SaveToXml which is causes this exception is also used in some cases, so it was helpful to know how to fix it.

On, #2, about distortions, I see that it's also present in your screenshot (stroke). It looks similar with my if I'm adding UseLayoutRounding=True. Please take a look. This is best seen when CellFrameStyle is Simple. Not only a table border is smooth but grid lines also. I increased them slightly, style w/shadow and w/o style.

Thanks,
-Kostya
  

shad_dist1.png (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Styling the TableNode focused state using the WPF styling system
Reply #6 - Oct 30th, 2014 at 12:30pm
Print Post  
Hi,

This looks like the result of standard anti-aliasing and sub-pixel rendering done by WPF, and I can see it even for tables without shadow effect as in screenshot below.

You could disable anti-aliasing for table frame lines like this:
table.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased);

But then some of the lines look two-pixels wide if not using sub-pixel rendering as the table does not draw them exactly at pixel coordinates.
  

Untitled_012.png ( 38 KB | 181 Downloads )
Untitled_012.png
Back to top
 
IP Logged
 
Kostya
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Aug 5th, 2014
Re: Styling the TableNode focused state using the WPF styling system
Reply #7 - Oct 31st, 2014 at 9:23am
Print Post  
Hi Stoyan,

Actually, UseLayoutRounding works well and I feel that this is nitpicking on my part. Lines deviation on smoothing is really insignificant, but the rounded corners really better than with disabled anti-aliasing for table frame. So thank you very much for your answers! Smiley

-Kostya
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint