Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Blurry text in custom WPF node in diagram (Read 8311 times)
Frans Bouma
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 4
Joined: Jan 3rd, 2009
Blurry text in custom WPF node in diagram
Jan 3rd, 2009 at 12:23pm
Print Post  
Hi,

I'm currently testing your WpfDiagram library for our next o/r mapper designer. I ran a simple test, by showing a test form with the diagram control on it and added every entity in the project using a test custom control (which are currently very ugly, but they're for testing only Wink )

Here's a screenshot:


As you can see, the text is very blurry on some elements. I set 'SnapToDevicePixels' to true on everything.

One note: the diagram control is hosted in ElementHost on a windowsform as the UI itself is made with windows forms.

What can I do to make everything appear OK?

Here's the small code snippet to display the model in the screenshot:
Code
Select All
#region Class Member Declarations
private Dictionary<EntityDefinition, DiagramNodeAdapter> _entityToWrapper;
#endregion

public TestModelRenderer()
{
	InitializeComponent();
	_entityToWrapper = new Dictionary<EntityDefinition, DiagramNodeAdapter>();
	_entityDiagram.Behavior = Behavior.Custom;
	_entityDiagram.CustomNodeType = typeof(EntityGlyph);
	_entityDiagram.AlignToGrid = false;
	_entityDiagram.SnapsToDevicePixels = true;
}


public void ShowModel()
{
	Project currentProject = ApplicationStateSingleton.GetInstance().CurrentProject;
	if(currentProject == null)
	{
		return;
	}

	if(_entityToWrapper.Count > 0)
	{
		return;
	}

	foreach(EntityDefinition entity in currentProject.EntityModel.Vertices)
	{
		EntityGlyph glyph = new EntityGlyph();
		glyph.DataContext = entity;
		glyph.SnapsToDevicePixels = true;
		DiagramNodeAdapter adapter = new DiagramNodeAdapter(glyph);
		adapter.AutoUpdateSize = true;
		adapter.SnapsToDevicePixels = true;
		_entityToWrapper.Add(entity, adapter);
		_entityDiagram.Nodes.Add(adapter);
		adapter.SnapsToDevicePixels = true;
	}

	foreach(RelationshipEdge edge in currentProject.EntityModel.Edges)
	{
		DiagramLink link = new DiagramLink(_entityDiagram, _entityToWrapper[edge.StartVertex], _entityToWrapper[edge.EndVertex]);
		_entityDiagram.Links.Add(link);
		link.SnapsToDevicePixels = true;
		link.SnapToNodeBorder = true;
	}

	AnnealLayout layout = new AnnealLayout();
	layout.Arrange(_entityDiagram);
} 



  

LLBLGen Pro lead developer. C# MVP
Back to top
WWW  
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Blurry text in custom WPF node in diagram
Reply #1 - Jan 5th, 2009 at 9:28am
Print Post  
Hi,

Apparently that's a widespread problem:

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5289ee56-6d06-4f66-84f2...

As a work-around you might try setting the diagram's SnapToDevicePixels property as well, setting such a GridSize that the grid points are aligned to device pixels, and then aligning all nodes to the grid.

Stoyan
  
Back to top
 
IP Logged
 
Frans Bouma
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 4
Joined: Jan 3rd, 2009
Re: Blurry text in custom WPF node in diagram
Reply #2 - Jan 5th, 2009 at 9:46am
Print Post  
Stoyo wrote on Jan 5th, 2009 at 9:28am:
Hi,

Apparently that's a widespread problem:

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/5289ee56-6d06-4f66-84f2...

As a work-around you might try setting the diagram's SnapToDevicePixels property as well, setting such a GridSize that the grid points are aligned to device pixels, and then aligning all nodes to the grid.

Stoyan

Thanks I'll try that.

One note: I tried to add normal ShapeNode instances with the name of the entity as well to the diagram and they are always sharp and non-blurry. Also when I disable snap to grid it doesn't matter. It looks like the Diagram item wrapper is aligned to a device pixel but the contents isn't.
  

LLBLGen Pro lead developer. C# MVP
Back to top
WWW  
IP Logged
 
Frans Bouma
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 4
Joined: Jan 3rd, 2009
Re: Blurry text in custom WPF node in diagram
Reply #3 - Jan 5th, 2009 at 10:13am
Print Post  
I saw I had not always SnapToDevicePixels added to all elements in my test Xaml, and when I added that, the elements rendered sharp.

Until I collapsed the Expander, then the collapsed element was blurry as hell.

What I wonder is: in all your demos of the WpfDiagram control, you don't have blurry text once, also not with the HTML-like elements. It's of course unacceptable for us to have blurry elements on the diagram, but as your demos never show blurryness, I wonder where the error might be, as it IS possible (your demos show that Smiley).

I read the thread, and I agree, it's the main reason why we opted for yet another Winforms based main UI, however for diagramming, Wpf seems easier, at least, at first, however it more and more starts to become a true pain as well...

I've specified my (modified test) xaml below.
Code
Select All
<UserControl x:Class="SD.LLBLGen.Pro.Gui.Controls.WPF.EntityGlyph"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:c="clr-namespace:SD.LLBLGen.Pro.ApplicationCore.EntityModel;assembly=SD.LLBLGen.Pro.ApplicationCore"
    Width="150" SnapsToDevicePixels="True" Focusable="True" Height="Auto">
	<UserControl.Resources>
		<DataTemplate x:Key="itemTemplate">
			<TextBlock Text="{Binding Path=Name}" FontSize="10" SnapsToDevicePixels="True"/>
		</DataTemplate>
	</UserControl.Resources>
	<Border BorderBrush="Black" BorderThickness="0.5" CornerRadius="10" Padding="5" SnapsToDevicePixels="True">
		<Border.BitmapEffect>
			<DropShadowBitmapEffect Softness="0.355"/>
		</Border.BitmapEffect>
		<Border.Background>
			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="#FFFDEEEE" Offset="1"/>
				<GradientStop Color="#FFF90909" Offset="0"/>
			</LinearGradientBrush>
		</Border.Background>
		<StackPanel Height="Auto" Width="Auto" SnapsToDevicePixels="True">
			<Label VerticalAlignment="Top" Height="Auto" Width="Auto" Content="{Binding Path=Name}" x:Name="_nameLabel" FontWeight="Bold"
			   FontSize="16" FontFamily="Tahoma" HorizontalContentAlignment="Center" Foreground="#FFFDEEEE" SnapsToDevicePixels="True"/>
			<Expander x:Name="_fieldExpander" Height="Auto" Width="Auto" Header="Fields" IsExpanded="True" SnapsToDevicePixels="True">
				<ListBox x:Name="_fieldsListBox" ItemsSource="{Binding Path=Fields}" BorderThickness="0">
					<ListBox.ItemTemplate>
						<DataTemplate>
							<TextBlock Text="{Binding Path=Name}"/>
						</DataTemplate>
					</ListBox.ItemTemplate>
				</ListBox>
			</Expander>
		</StackPanel>
	</Border>
</UserControl>
 



(updated the xaml a bit, it contained a lot of left-over crap from tests).

Even with a fixed width, it becomes blurry when collapsing the expander. It seems the element is rendered 1-2 pixels left of where it was. As your diagram does the positioning, I'm not sure if this is due to some wrapping code in the diagram item wrrapper.
  

LLBLGen Pro lead developer. C# MVP
Back to top
WWW  
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Blurry text in custom WPF node in diagram
Reply #4 - Jan 5th, 2009 at 10:29am
Print Post  
We don't do anything special when rendering the ShapeNodes' text, but just call DrawingContext.DrawText(nodeCenter). I suppose this might be aligned to pixels if the ShapeNode is initially created at integer coordinates and has an integer size. In your case there might be some alignment error accumulated through the layout process of the items in the control' visual tree. So instead of using the WPF built-in layout panels, you might try creating your own panel that always places its elements at integer coordinates.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Frans Bouma
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 4
Joined: Jan 3rd, 2009
Re: Blurry text in custom WPF node in diagram
Reply #5 - Jan 5th, 2009 at 11:24am
Print Post  
Stoyo wrote on Jan 5th, 2009 at 10:29am:
We don't do anything special when rendering the ShapeNodes' text, but just call DrawingContext.DrawText(nodeCenter). I suppose this might be aligned to pixels if the ShapeNode is initially created at integer coordinates and has an integer size. In your case there might be some alignment error accumulated through the layout process of the items in the control' visual tree. So instead of using the WPF built-in layout panels, you might try creating your own panel that always places its elements at integer coordinates.

Hmm....

I think that might result in a lot of work, as expanders, listboxes and the like also likely will not make things work properly. :/

I look for a library which actually makes us write less code but if I still have to write out all the low-level rendering code, it's not worth the trouble nor the money.

I found some pixelsnapper code on an msdn blog, one variant didn't work the other one was simply very slow and also not really solving the mess. I ran into a topic about guidelines which should be used with a drawingcontext, but as I just supply a xaml object I don't see how I need to use them.

Your library was one of my last hopes of getting this done. As it seems you also don't know the answer, I guess we have to drop your library from our (now very short) list of libraries to use in our next version of LLBLGen Pro.
  

LLBLGen Pro lead developer. C# MVP
Back to top
WWW  
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Blurry text in custom WPF node in diagram
Reply #6 - Jan 5th, 2009 at 11:49am
Print Post  
You could implement something similar using TableNodes with Row.Header = true set for some rows. Though that allows only for a two-level hierarchy.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint