Develop Reference

Crop content of rounded-corner border with image out of border

I need to move and rotate the image outside of the rounded border
example:
In How to make the contents of a round-cornered border be also round-cornered? find answer:
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Border1}" />
</Grid.OpacityMask>
<Border x:Name="Border1" CornerRadius="30" Background="Green" />
<TextBlock Text="asdas das d asd a sd a sda" />
</Grid>
This works if the elements do not go out of bounds.
If using rotate and/or margin like this:
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=_border1}" />
</Grid.OpacityMask>
<Border x:Name="_border1"
BorderThickness="0"
CornerRadius="30"
Background="Green" />
<TextBlock Text="SomeText"
Foreground="Yellow" />
<Image Source="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"
Margin="-5 0 0 0"
Height="20"
Width="55"
Stretch="UniformToFill"
VerticalAlignment="Top"
HorizontalAlignment="Left"
RenderTransformOrigin="0.5 0.5">
<Image.RenderTransform>
<RotateTransform Angle="-7" />
</Image.RenderTransform>
</Image>
</Grid>
The rounding is displaced
How can I crop the image like in the first example? Thanks for your help.

Something is going wrong with the viewport calculation of the VisualBrush. Not sure if that is a bug in WPF.
A workaround could be setting the viewport in absolute units, with Rectangle instead of a Border:
<Grid.OpacityMask>
<VisualBrush
Visual="{Binding ElementName=rect}"
ViewportUnits="Absolute"
Viewport="{Binding ElementName=rect, Path=RenderedGeometry.Rect}"/>
</Grid.OpacityMask>
<Rectangle x:Name="rect" RadiusX="30" RadiusY="30" Fill="Green"/>
Or simpler, with setting the Clip property instead of OpacityMask, but still supporting resize:
<Grid Clip="{Binding ElementName=rect, Path=RenderedGeometry}">
<Rectangle RadiusX="30" RadiusY="30" Fill="Green" x:Name="rect"/>
...
</Grid>

I managed to achieve the desired result using Clip instead of OpacityMask. Then all the elements that need to be cropped must be children of the Border. If your Border needs to be dynamic, you need to bind the dimensions of the RectangleGeometry to the dimensions of the Border using Converter.
<Grid>
<Border BorderThickness="0"
CornerRadius="30"
Background="Green">
<Border.Clip>
<RectangleGeometry RadiusX="30" RadiusY="30" Rect="0,0,500,400"/>
</Border.Clip>
<Grid>
<TextBlock Text="SomeText"
Foreground="Yellow"/>
<Image Source="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"
Margin="-5 0 0 0"
Height="20"
Width="55"
Stretch="UniformToFill"
VerticalAlignment="Top"
HorizontalAlignment="Left"
RenderTransformOrigin="0.5 0.5">
<Image.RenderTransform>
<RotateTransform Angle="-7"/>
</Image.RenderTransform>
</Image>
</Grid>
</Border>
</Grid>

How to bind PathGeometry objects in MVVM

Imagine an application where the user can type in some text and based on the text input different symbols are shown on an image.
I am looking for a way generate a list of Path objects and bind this list in XAML to show the path objects on top of another path-image.
I.e. I have a simple image of a house, the user type in text like:
"ball on roof, flower in window, shovel in garden"
In the ViewModel I will analyze this text and generate a path Circle for the ball, a path Star for the flower and a path Square for the shovel.
I think these objects should be put in a List and in XAML bind to this list.
The "house" is drawn like this:
<Border Grid.Column="1" CornerRadius="10" BorderBrush="Black" BorderThickness="0.3" Margin="5,0,0,0" Grid.RowSpan="2" Padding="5">
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Grid RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1" ScaleX="1"/>
<SkewTransform AngleY="0" AngleX="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Path Fill="Black" Data="{StaticResource Path1}"/>
<Path Fill="Black" Data="{StaticResource Path2}"/>
<Path Fill="Black" Data="{StaticResource Path3}"/>
<Path Fill="Black" Data="{StaticResource Path4}"/>
...
</Grid>
</Viewbox>
</Border>
After the all the "Path" I imagine I would use a CombinedGeometry and bind to the VM List. But I am not sure about this part.

How to use the XAML dictionary that Syncfusion Metro Studio produces

For resolution independence we want scaling art. Ok, so a common source for that mentioned on stack is Syncfusion Metro Studio.
Metro Studio 2 produces this for XAML:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="error">
<Grid Width="64" Height="64" Visibility="Visible">
<Grid Visibility="Visible">
<Rectangle Fill="#FFD21818" Visibility="Visible" />
<Ellipse Fill="#FFD21818" Visibility="Collapsed" />
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FFD21818" Visibility="Collapsed" />
</Grid>
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FFFFFFFF" Width="36" Height="36" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</ResourceDictionary>
So far so good, just merge this into the project resources. But how to consume this?
using viewbox in ResourceDictionary file has an answer that lets you change the ViewBox to DataTemplate in the ResourceDictionary and then use a converter to display it as a button's ContentTemplate. That is ok for Button based stuff, but what if I just need the icon itself. How do I go from ViewBox in a resource dictionary to somehow including it in lets say a grid in XAML?

You can use it as Content for any ContentControl Directly,in case if you just want the icon in Grid,try like below,
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="error">
<Grid Width="64" Height="64" Visibility="Visible">
<Grid Visibility="Visible">
<Rectangle Fill="#FFD21818" Visibility="Visible" />
<Ellipse Fill="#FFD21818" Visibility="Collapsed" />
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FFD21818" Visibility="Collapsed" />
</Grid>
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FFFFFFFF" Width="36" Height="36" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</ResourceDictionary>
<Grid>
<ContentControl Content="{StaticResource error}"/>
</Grid>
if you are intend to use the same resource in multiple location,please set x:Shared attribute as false as below,
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:shared="false" x:Key="error">
.......
</Viewbox>
</ResourceDictionary>

I did a similar thing in one of my projects using Syncfusion Metro Studio. I found wrapping the image in a ViewBox caused a number of annoyances. I ended up using the image alone, and then embedded it into a Path where I wanted to use the image.
I found it a lot more flexible than trying to squeeze a ViewBox into xaml.
How I did it:
There is a type Geometry, which allows you to define a Bezier path as a resource:
<Geometry x:Key="Keyboard">M48.537998,24.254L57.365002,24.254 57.365002,30.875 48.537998,30.875z M17.642,24.254L46.332001,24.254 46.332001,30.875 17.642,30.875z M6.6760006,24.254L15.504,24.254 15.504,30.875 6.6760006,30.875z M50.744999,15.426L57.365002,15.426 57.365002,22.047001 50.744999,22.047001z M41.986,15.426L48.606998,15.426 48.606998,22.047001 41.986,22.047001z M33.09,15.426L39.709999,15.426 39.709999,22.047001 33.09,22.047001z M24.261999,15.426L30.882999,15.426 30.882999,22.047001 24.261999,22.047001z M15.435,15.426L22.056,15.426 22.056,22.047001 15.435,22.047001z M6.6070004,15.426L13.229,15.426 13.229,22.047001 6.6070004,22.047001z M50.744999,6.599L57.365002,6.599 57.365002,13.219 50.744999,13.219z M41.986,6.599L48.606998,6.599 48.606998,13.219 41.986,13.219z M33.09,6.599L39.709999,6.599 39.709999,13.219 33.09,13.219z M24.261999,6.599L30.882999,6.599 30.882999,13.219 24.261999,13.219z M15.435,6.599L22.056,6.599 22.056,13.219 15.435,13.219z M6.6070004,6.599L13.229,6.599 13.229,13.219 6.6070004,13.219z M4.47015,4.4635506L4.47015,33.242199 59.6413,33.242199 59.6413,4.4635506z M1.3333101,0L62.666698,0C63.403,0,64,0.59634399,64,1.3333397L64,36.166698C64,36.903702,63.403,37.5,62.666698,37.5L1.3333101,37.5C0.59704602,37.5,0,36.903702,0,36.166698L0,1.3333397C0,0.59634399,0.59704602,0,1.3333101,0z</Geometry>
Once you have a geometry resource you can use it in Path.Data. In this example the border is the bounds of the image 32x32 pixels. Then you can use the Border and use it in a Grid as you would with any other control.
<Border Width="32" Height="32">
<Path Data="{StaticResource Keyboard}" Fill="White" Stretch="Uniform" RenderTransformOrigin="0.5, 0.5">
</Path>
</Border>
This technique also allows you to bind the properties as needed. I.e. Fill to a color, and have it change dynamically.

Simply import the output from Metro Studio into Expression Blend
-> Design View
Select icon and click 'Tools' -> Make Brush Resource -> MakeDrawingBrush
Then Blend will convert the icon for use anywhere in your app

How can I get geometry information in C# from an XAML object?

given the following XAML code:
<Canvas Name="MainView">
<Canvas Name="TriangleElement" Width="50" Height="50" Canvas.Left="110" Canvas.Top="100">
<Canvas.RenderTransform>
<RotateTransform CenterX="25" CenterY="25" Angle="0" />
</Canvas.RenderTransform>
<Path Stroke="#FF009600" StrokeThickness="1" Fill="#FF68E168">
<Path.Data>
M 0,0 L 50,0 50,50 Z
</Path.Data>
</Path>
</Canvas>
<Canvas Name="SquareElement" Width="50" Height="50" Canvas.Left="170" Canvas.Top="100">
<Canvas.RenderTransform>
<RotateTransform CenterX="25" CenterY="25" Angle="0" />
</Canvas.RenderTransform>
<Path Stroke="#FF005DFF" StrokeThickness="1" Fill="#FF98D0F8">
<Path.Data>M 0,0 L 50,0 50,50 0,50 Z</Path.Data>
</Path>
</Canvas>
</Canvas>
How can I get the path data / geometry information in c# without naming it in the XAML? In the past I have created several UserControl's, created an interface to the objects, and pulled the info based on the Path name. In my current case I cannot use this approach.

Not sure if I understand the question, but can't you use
((Path)TriangleElement.Children[0]).Data
And what are those Canvas elements for? They don't seem to be doing anything.
Why not:
<Path Name="SquareElement" Width="50" Height="50" Stroke="#FF005DFF" StrokeThickness="1" Fill="#FF98D0F8">
<Path.RenderTransform>
<RotateTransform CenterX="25" CenterY="25" Angle="60" />
</Path.RenderTransform>
<Path.Data>M 0,0 L 50,0 50,50 0,50 Z</Path.Data>
</Path>
Then you can get straight to your paths by name.

Rendering sharp lines in WPF

If I render the following:
<Grid>
<Canvas SnapsToDevicePixels="True">
<Path Fill="#FF000000" SnapsToDevicePixels="True" Data="M 0.00,0.00 L 2.50,0.00 0.00,10.00 " />
<Path Fill="#FF260014" SnapsToDevicePixels="True" Data="M 2.50,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
<Canvas.RenderTransform>
<ScaleTransform ScaleX="{Binding ElementName=slider,Path=Value}" ScaleY="{Binding ElementName=slider,Path=Value}" />
</Canvas.RenderTransform>
</Canvas>
<Slider x:Name="slider" Minimum="0" Maximum="50" Value="30"/>
</Grid>
I get this result (Kaxaml):
Notice the thin white line between the two shapes. I searched around and found out this has to do with pixel alignment. I would expect that settings SnapsToDevicePixels="True" would be enough to get rid of the line, but this doesn't work!
Any ideas how to get rid of the white line?

Try turning edge aliasing on with RenderOptions, like this (see Grid properties)
<Grid RenderOptions.EdgeMode="Aliased">
<Canvas SnapsToDevicePixels="True">
<Path Fill="#FF000000" SnapsToDevicePixels="True" Data="M 0.00,0.00 L 2.50,0.00 0.00,10.00 " />
<Path Fill="#FF260014" SnapsToDevicePixels="True" Data="M 2.50,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
<Canvas.RenderTransform>
<ScaleTransform ScaleX="{Binding ElementName=slider,Path=Value}" ScaleY="{Binding ElementName=slider,Path=Value}" />
</Canvas.RenderTransform>
</Canvas>
<Slider x:Name="slider" Minimum="0" Maximum="50" Value="30"/>
</Grid>

Remember that SnapsToDevicePixels only controls that individual points do not lie on fractional pixel values. For horizontal and vertical lines this is most easily observed. In your case you are seeing an entirely different problem. The edges of your shapes are anti-aliased and therefore blended with the background. Since your shapes are exactly adjacent to each other both will be blended with the white background of the window. You can try putting one shape behind the other instead:
<Canvas>
<Path Fill="#FF000000" Data="M 0.00,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
<Path Fill="#FF260014" Data="M 2.50,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
<Canvas.RenderTransform>
<ScaleTransform ScaleX="{Binding ElementName=slider,Path=Value}" ScaleY="{Binding ElementName=slider,Path=Value}" />
</Canvas.RenderTransform>
</Canvas>
which should render correctly. You see similar rendering errors in many vector file formats that render primarily to screen, such as SVG.
The other option would be to turn off anti-aliasing but that will make your edges jaggy which may not be what you want (anti-aliasing turned off in the upper half):