• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 107
  • Last Modified:

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
0
Matt Cartlidge
Asked:
Matt Cartlidge
1 Solution
 
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
 
Matt CartlidgeSenior Infrastructure EngineerAuthor Commented:
Thank you for your explanation. It is working great now.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now