XAML: How to embed XAML geometry image in to a button

In WPF, I have many icons which I want to display within their own button using XAML. However, I want to use images which are purely XAML-based. These are basically converted from SVG.

I've been able to create my splash screen using XAML images by adding a DataTemplate and referring to it with a ContentPresenter in a Canvas and specifically adding the size and position by doing this.

                <Canvas Margin="25,40,0,0">
                    <ContentPresenter Width="175" x:Name="imagelogoplay" ContentTemplate="{StaticResource img-circled-play}"/>
                </Canvas>

Open in new window


I've been using the below code to create an image with an image inside.

        <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="1">
            <Button Width="64" Height="64">
                <Canvas>
                    <ContentPresenter ContentTemplate="{StaticResource img-hand}"/>
                </Canvas>
            </Button>
        </StackPanel>

Open in new window


However, the image stays a static size no matter what values I use either in the canvas or the content presenter.

XAML bases image within a button showing outside of the area
I also thought about putting the canvas in to a viewbox. However, this makes the image disappear completely.

I'm pretty new to XAML so would appreciate if someone could shed light on this.

I've attached the icons.xaml file which I am using as a resource which contains the "img-hand" data template.
icons.xaml
Matt CartlidgeSenior Infrastructure EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Snarf0001Commented:
Viewbox was the right idea, you need that to get it to scale (which I assume is what you're after).  The problem is with the tool starting it out in a <Canvas>.  Canvas uses absolute x / y positioning, so the width and height will always be zero unless you specify them.  The child controls have no bearing on the width.  If you change your <Canvas Name="surface1"> to be <Grid Name="surface1">, the viewbox will work.

            <DataTemplate x:Key="img-hand">
                <!--This file is NOT compatible with Silverlight-->
                <!--Unknown tag: metadata-->
                <!--Unknown tag: sodipodi:namedview-->
                <Grid Name="surface1">
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path35" Fill="#FFFAEFDE">
                        <Path.Data>
                            <PathGeometry Figures="M 51.878906 53.46875 L 50.660156 57.46875 C 50.601563 57.660156 50.53125 57.851563 50.460938 58.039063 C 49.40625 60.726563 46.988281 62.636719 44.128906 63.039063 C 43.761719 63.09375 43.390625 63.117188 43.019531 63.121094 L 25.75 63.121094 C 25.375 63.105469 25 63.066406 24.628906 63 C 22.621094 62.714844 20.792969 61.679688 19.519531 60.101563 L 19 59.460938 L 14.808594 54.269531 C 13.558594 52.714844 12.464844 51.039063 11.539063 49.269531 L 3.929688 34.601563 C 4.371094 33.132813 5.523438 31.988281 6.992188 31.558594 C 8.457031 31.125 10.046875 31.464844 11.210938 32.460938 L 19.929688 39.929688 L 20 43.460938 L 20.800781 8.53125 C 20.824219 6.574219 22.429688 5.011719 24.386719 5.035156 C 26.339844 5.058594 27.90625 6.664063 27.878906 8.621094 L 27.878906 30.078125 L 28 30.078125 L 28.808594 4.078125 C 28.851563 2.40625 30.226563 1.074219 31.898438 1.078125 C 33.570313 1.078125 34.941406 2.410156 34.988281 4.078125 L 35.789063 30.078125 L 35.890625 30.078125 L 35.890625 8.628906 C 35.863281 6.667969 37.429688 5.058594 39.390625 5.03125 C 41.351563 5.003906 42.960938 6.570313 42.988281 8.53125 L 43.589844 30.078125 L 43.890625 30.078125 L 43.890625 15.671875 C 43.890625 13.6875 45.496094 12.078125 47.480469 12.078125 C 49.390625 12.078125 50.964844 13.574219 51.058594 15.480469 L 52.699219 46.480469 C 52.839844 48.839844 52.5625 51.207031 51.878906 53.46875 Z " FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path37" Fill="#FFEFD8BE">
                        <Path.Data>
                            <PathGeometry Figures="M 49.519531 58.828125 C 48.605469 61.089844 46.546875 62.683594 44.128906 63 L 24.628906 63 C 23.628906 62.859375 21.710938 61.101563 20.050781 59.378906 C 19.496094 58.800781 19.34375 57.949219 19.660156 57.210938 C 19.976563 56.476563 20.699219 56 21.5 56 L 47.699219 56 C 48.378906 56 49.015625 56.347656 49.382813 56.917969 C 49.75 57.492188 49.800781 58.210938 49.519531 58.828125 Z " FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path39" Fill="#FFFFF7F0">
                        <Path.Data>
                            <PathGeometry Figures="M 19.320313 44.148438 L 6.789063 31.238281 L 10.539063 31.449219 L 20.570313 39 Z " FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path41" Fill="#FF8D6C9F">
                        <Path.Data>
                            <PathGeometry Figures="M 53.738281 46.480469 L 52.101563 15.421875 C 52.015625 13.558594 50.816406 11.933594 49.058594 11.304688 C 47.304688 10.679688 45.34375 11.171875 44.101563 12.558594 L 44 8.5 C 43.964844 6.613281 42.769531 4.945313 40.992188 4.304688 C 39.214844 3.664063 37.230469 4.1875 36 5.621094 L 36 4 C 36 1.738281 34.167969 -0.09375 31.90625 -0.09375 C 29.644531 -0.09375 27.808594 1.738281 27.808594 4 L 27.808594 5.570313 C 26.574219 4.171875 24.605469 3.671875 22.851563 4.3125 C 21.097656 4.953125 19.914063 6.601563 19.871094 8.46875 L 19.171875 38 L 11.859375 31.699219 C 10.445313 30.5 8.519531 30.089844 6.734375 30.605469 C 4.953125 31.125 3.550781 32.507813 3 34.28125 C 2.914063 34.539063 2.933594 34.820313 3.058594 35.058594 L 10.671875 49.71875 C 11.605469 51.550781 12.722656 53.28125 14 54.890625 L 18.710938 60.71875 C 20.421875 62.820313 23 64.023438 25.710938 63.988281 L 43 63.988281 C 46.941406 64.035156 50.441406 61.480469 51.601563 57.710938 L 52.820313 53.710938 C 53.546875 51.371094 53.859375 48.925781 53.738281 46.480469 Z M 50.929688 53.171875 L 49.710938 57.171875 C 48.792969 60.101563 46.070313 62.09375 43 62.078125 L 25.75 62.078125 C 23.632813 62.082031 21.628906 61.125 20.300781 59.480469 L 15.589844 53.648438 C 14.375 52.144531 13.3125 50.523438 12.421875 48.808594 L 5 34.519531 C 5.4375 33.480469 6.34375 32.714844 7.441406 32.453125 C 8.539063 32.195313 9.695313 32.476563 10.550781 33.210938 L 19.101563 40.539063 L 19 43.429688 C 19 43.980469 19.449219 44.429688 20 44.429688 C 20.550781 44.429688 21 43.980469 21 43.429688 L 21.800781 8.511719 C 21.816406 7.105469 22.96875 5.984375 24.371094 6 C 25.773438 6.015625 26.898438 7.167969 26.878906 8.570313 L 26.878906 30.078125 C 26.925781 30.652344 27.40625 31.085938 27.980469 31.078125 C 28.53125 31.078125 28.980469 30.632813 28.980469 30.078125 L 29.789063 4.078125 C 29.796875 2.917969 30.742188 1.980469 31.90625 1.984375 C 33.066406 1.992188 34.003906 2.9375 34 4.101563 L 34.808594 30.101563 C 34.808594 30.652344 35.257813 31.101563 35.808594 31.101563 L 35.910156 31.101563 C 36.460938 31.101563 36.910156 30.652344 36.910156 30.101563 L 36.910156 8.628906 C 36.96875 7.28125 38.070313 6.214844 39.417969 6.195313 C 40.765625 6.171875 41.898438 7.207031 42 8.550781 L 42.601563 30.101563 C 42.601563 30.652344 43.046875 31.101563 43.601563 31.101563 L 43.898438 31.101563 C 44.453125 31.101563 44.898438 30.652344 44.898438 30.101563 L 44.898438 15.671875 C 44.863281 14.238281 45.988281 13.046875 47.421875 13.011719 C 48.851563 12.972656 50.042969 14.097656 50.078125 15.53125 L 51.710938 46.589844 C 51.835938 48.8125 51.566406 51.039063 50.921875 53.171875 Z " FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path43" Fill="#FF8D6C9F">
                        <Path.Data>
                            <PathGeometry Figures="M 28 37 C 27.449219 37 27 37.449219 27 38 L 27 40 C 27 40.550781 27.449219 41 28 41 C 28.550781 41 29 40.550781 29 40 L 29 38 C 29 37.449219 28.550781 37 28 37 Z " FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path45" Fill="#FF8D6C9F">
                        <Path.Data>
                            <PathGeometry Figures="M 33 37 C 32.449219 37 32 37.449219 32 38 L 32 40 C 32 40.550781 32.449219 41 33 41 C 33.550781 41 34 40.550781 34 40 L 34 38 C 34 37.449219 33.550781 37 33 37 Z " FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path47" Fill="#FF8D6C9F">
                        <Path.Data>
                            <PathGeometry Figures="M 38 37 C 37.449219 37 37 37.449219 37 38 L 37 40 C 37 40.550781 37.449219 41 38 41 C 38.550781 41 39 40.550781 39 40 L 39 38 C 39 37.449219 38.550781 37 38 37 Z " FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path49" Fill="#FF8D6C9F">
                        <Path.Data>
                            <PathGeometry Figures="M 43 37 C 42.449219 37 42 37.449219 42 38 L 42 40 C 42 40.550781 42.449219 41 43 41 C 43.550781 41 44 40.550781 44 40 L 44 38 C 44 37.449219 43.550781 37 43 37 Z " FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                </Grid>
            </DataTemplate>

Open in new window

            <Button>
                <Viewbox>
                    <ContentPresenter ContentTemplate="{StaticResource img-hand}"/>
                </Viewbox>
            </Button>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Matt CartlidgeSenior Infrastructure EngineerAuthor Commented:
Thank you for your explanation. It is working great now.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WPF

From novice to tech pro — start learning today.