I am pretty new with WPF design (and design in general), and I need help with one task.
I have a style for a button that contains some data in a Path, which draws an icon on it (basically simple add new icon). Now I would like to make a copy icon out of it.
I could not find a way to manipulate with Path I have in Blend, so what I had in mind was:
1) Copy Path data so we can draw two icons (to have two Path objects in Content)
2) Shift first a little to the left and top
3) Shift second a little to the right and bottom
4) Make second one overlap first one
This is what I did:
Since we cannot have two elements set for Content, I have added one Grid element, and inside I copied Path element twice. Then I repositioned both path to simulate duplicate data.
<Setter Property="Content">
<Setter.Value>
<Grid>
<Path Data="..." Margin="10" Stretch="Fill" Fill="{StaticResource IconBrush}" RenderTransformOrigin="0.5,0.4">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="-90" />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path Data="..." Margin="10" Stretch="Fill" Fill="{StaticResource IconBrush}" RenderTransformOrigin="0.5,0.6">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="-90" />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Setter.Value>
</Setter>
Problem: I do not get overlap with second icon (basically everything is transparent. That means that I probsably need to delete some points on first icon, but I could not achieve that in Blend?
Can anyone share some light how to achieve what I need?
Not sure what your icons should look like, but the following XAML will display two overlapping plus signs using the same
Pathdata for both, but with a simpleTranslateTransformto offset the second one.I would recommend not putting margins or ‘Stretch’ properties in your actual path objects. Take care of that in the Grid container they are in, or a containing Viewbox if you need to scale them up or down.
EDIT
If you are actually using the
Fillproperty of thePathobject to draw the icon geometry, as with aVisualBrushobject, instead of thePath.Data, then you don’t want to use aPathin the first place. Just use twoRectangleobjects, with your ‘IconBrush’ Fill in the grid and do theTranslateTransformon one of them so that they overlap to the desired amount. Remember that with XAML, the object that appears last in the listing is rendered on top.EDIT 2
The above XAML is probably way too big for your needs. You can just put the whole grid in a
Viewboxand then set theHeightandWidthproperties of theViewboxto get it to the size you need.EDIT 3
Custom button style:
Button implementation:
What it looks like in the WPF Window: