Geek asks and answers

Creating a button with vector graphics in the content

I am new to 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 the Path that draws an icon on it (basically simple to add a new icon). Now I want to make a copy icon out of it.

I could not find a way to manipulate using the path that I have in Blend, so I had in mind the following:

1) Copy the Path data so that we can draw two icons (to have two Path objects in the Content) 2) First shift a little to the left and up 3) Move the second a little to the right and bottom 4) Make the second overlap the first.

Here's what I did: Since we cannot set two elements for Content, I added one Grid element, and inside I double-copied the Path element. Then I moved both paths 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 a match for the second icon (basically everything is transparent. Does this mean that I probably need to delete some points on the first icon, but I could not achieve this in Blend?

Can anyone share some light on how to achieve what I need?

+5
source share
1 answer

You don't know what your icons look like, but the next XAML will display two matching pluses using the same data Pathfor both, but with a simple TranslateTransformoffset for the second.

    <Grid>
        <Path Fill="#FF008000" >
            <Path.Data>
                <PathGeometry Figures="m 30 25.362188 0 30.000001 -30 0 0 20 30 0 0 29.999991 20 0 0 -29.999991 30 0 0 -20 -30 0 0 -30.000001 -20 0 z" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path Fill="#FF92D050" >
            <Path.Data>
                <PathGeometry Figures="m 30 25.362188 0 30.000001 -30 0 0 20 30 0 0 29.999991 20 0 0 -29.999991 30 0 0 -20 -30 0 0 -30.000001 -20 0 z" FillRule="nonzero"/>
            </Path.Data>
            <Path.RenderTransform>
                <TranslateTransform X="25" Y="-25"/>
            </Path.RenderTransform>
        </Path>
    </Grid>

Stretch . Grid, , Viewbox, .

Fill Path , VisualBrush, Path.Data, Path . Rectangle, "IconBrush" TranslateTransform , . , XAML , , .

2

    <Grid>
        <Path Fill="#FFFFFFFF">
            <Path.Data>
                <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
            </Path.Data>
        </Path>
        <Path Fill="#FFB3B3B3">
            <Path.Data>
                <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
            </Path.Data>
        </Path>
        <Path Fill="#FFFFFFFF">
            <Path.Data>
                <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
            </Path.Data>
            <Path.RenderTransform>
                <TranslateTransform X="30" Y="30"/>
            </Path.RenderTransform>
        </Path>
        <Path Fill="#FFB3B3B3">
            <Path.Data>
                <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
            </Path.Data>
            <Path.RenderTransform>
                <TranslateTransform X="30" Y="30"/>
            </Path.RenderTransform>
        </Path>
    </Grid>

XAML, , . Viewbox, Height Width Viewbox, .

3

:

<Style x:Key="btnCustom" TargetType="{x:Type Button}">
    <Setter Property="Content">
        <Setter.Value>
            <Viewbox>
                <Grid Margin="0,0,30,30">
                    <Path Fill="#FFFFFFFF">
                        <Path.Data>
                            <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path Fill="#FFB3B3B3">
                        <Path.Data>
                            <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path Fill="#FFFFFFFF">
                        <Path.Data>
                            <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
                        </Path.Data>
                        <Path.RenderTransform>
                            <TranslateTransform X="30" Y="30"/>
                        </Path.RenderTransform>
                    </Path>
                    <Path Fill="#FFB3B3B3">
                        <Path.Data>
                            <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
                        </Path.Data>
                        <Path.RenderTransform>
                            <TranslateTransform X="30" Y="30"/>
                        </Path.RenderTransform>
                    </Path>
                </Grid>
            </Viewbox>
        </Setter.Value>
    </Setter>
</Style>

:

    <Button HorizontalAlignment="Right" Style="{StaticResource btnCustom}"
            Height="30" Width="100"/>

WPF:

enter image description here

+5

More articles:


All Articles