Ellipse with StrokeDashArray creates skewed geometry in version 3.1.5
Hi,
I'm currently designing a gauge-like control in blend, for use in a native c++ application.
The control looks correct in blend, but when I import the xaml in my native project, the geometry created from StrokeDashArray looks a bit skewed.
I tried to draw some lines following the direction where the geometry is pointing, and it seems to converge around an inner circle, instead of the center point.
the same xaml in blend does not have this problem
I am using a custom value converter to calculate the stroke-spacing, but I don't think the problem lies there, since I have tried with hardcoded values as well (like in the code example below).
I tried to recreate the problem using xamltoy with the code below, but the problem does not appear to be present there (maybe it's using a differend SDK version?):
Is this a known issue, and if so, is there a workaround for this?
I'm currently designing a gauge-like control in blend, for use in a native c++ application.
The control looks correct in blend, but when I import the xaml in my native project, the geometry created from StrokeDashArray looks a bit skewed.
I tried to draw some lines following the direction where the geometry is pointing, and it seems to converge around an inner circle, instead of the center point.
the same xaml in blend does not have this problem
I am using a custom value converter to calculate the stroke-spacing, but I don't think the problem lies there, since I have tried with hardcoded values as well (like in the code example below).
I tried to recreate the problem using xamltoy with the code below, but the problem does not appear to be present there (maybe it's using a differend SDK version?):
Is this a known issue, and if so, is there a workaround for this?
Code: Select all
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Resources>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:local="clr-namespace:Voca.UserControls"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Style TargetType="{x:Type Button}" x:Key="CircularGaugeTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Viewbox>
<StackPanel>
<Grid Width="800" Height="800" >
<Ellipse StrokeThickness="3" Stretch="Uniform">
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4D4D4D" Offset="1"/>
<GradientStop Color="Gray"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse StrokeThickness="2" Stretch="Uniform" Margin="5" >
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF333333" Offset="0"/>
<GradientStop Color="#FF999999" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF484646" Offset="0"/>
<GradientStop Color="#FF17171A" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse StrokeDashArray="0.2 2.40609407" Stroke="#CCFFFFFF" StrokeThickness="55"
Width="785" Height="785">
</Ellipse>
<Ellipse Width="15" Height="15" Panel.ZIndex="10">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF141212" Offset="1"/>
<GradientStop Color="#FFE9E9E9" Offset="0.561"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
<TextBlock Text="{Binding Label, RelativeSource={RelativeSource TemplatedParent}}" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#fff"></TextBlock>
</StackPanel>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</ResourceDictionary>
</Grid.Resources>
<Grid Background="#1231" >
<Border Width="900" Height="800" CornerRadius="5" BorderThickness="2" BorderBrush="#CA000000" Padding="10,10,10,10" Background="#7E000000">
<Grid>
<StackPanel Margin="0 0 0 0" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Margin="20 20 20 10"
Style="{StaticResource CircularGaugeTheme}"
Foreground="#FFF1F1F1">
</Button>
</StackPanel>
</Grid>
</Border>
</Grid>
</Grid>
Re: Ellipse with StrokeDashArray creates skewed geometry in version 3.1.5
Could you try the XAML you used for XamlToy with the XamlPlayer corresponding to the SDK you are using?I tried to recreate the problem using xamltoy with the code below, but the problem does not appear to be present there (maybe it's using a differend SDK version?):
Re: Ellipse with StrokeDashArray creates skewed geometry in version 3.1.5
I think I can see the same skewing problem with the xamlplayer.Could you try the XAML you used for XamlToy with the XamlPlayer corresponding to the SDK you are using?
Re: Ellipse with StrokeDashArray creates skewed geometry in version 3.1.5
Great, could you please open a ticket in the tracker and attach that XAML?
Re: Ellipse with StrokeDashArray creates skewed geometry in version 3.1.5
I did some more testing with a more accurate xaml compared to the one I am using, and the issue is not nearly as bad in the xamlplayer as it is in my application.
I made a screenshot to compare, top is xamlplayer, bottom is my application.
edit: I had different amount of indicators in the xamlplayer version, here is an image with the same number:
It seems to me that the xamlplayer has a higher tesselation than the geometry in my app, is there a setting where I can tweak this?
I am using Opengl renderer for my app, while I assume the xamlplayer is using directX, not sure if that can affect the tesselation used.
Another thing that is different is that I'm using a styled custom control insteaad of a styled button, but I don't think that should matter, since the style is the same, it's mainly just for databinding stuff.
I made a screenshot to compare, top is xamlplayer, bottom is my application.
edit: I had different amount of indicators in the xamlplayer version, here is an image with the same number:
It seems to me that the xamlplayer has a higher tesselation than the geometry in my app, is there a setting where I can tweak this?
I am using Opengl renderer for my app, while I assume the xamlplayer is using directX, not sure if that can affect the tesselation used.
Another thing that is different is that I'm using a styled custom control insteaad of a styled button, but I don't think that should matter, since the style is the same, it's mainly just for databinding stuff.
Re: Ellipse with StrokeDashArray creates skewed geometry in version 3.1.5
Curves quality can be changed with View::SetTessellationMaxPixelError(). XamlPlayer is using HighQuality. That should explain the differences you are observing.
NoesisGUI 3.2 brings also a much better algorithm for curves. Stay tuned about it :)
NoesisGUI 3.2 brings also a much better algorithm for curves. Stay tuned about it :)
Re: Ellipse with StrokeDashArray creates skewed geometry in version 3.1.5
Thank you! This helped a lot.Curves quality can be changed with View::SetTessellationMaxPixelError(). XamlPlayer is using HighQuality. That should explain the differences you are observing.
NoesisGUI 3.2 brings also a much better algorithm for curves. Stay tuned about it :)
Who is online
Users browsing this forum: Google [Bot] and 6 guests