使用 XAML 图像作为按钮内容

Question

我是 Visual Studio 的初学者。

我想在我的按钮中有单独定义的图标。我想仅使用 XAML 来实现此目的，以便使我的 GUI 内容尽可能独立。

我希望能够像这样使用它：

<Button x:Name="CallButton" Height="128px" Width="128px" 
        Style="{DynamicResource RoundButton}" Content="{StaticResource PhoneIcon}">

我已经在它们各自的资源字典中定义了 RoundButton 和 PhoneIcon。

圆形按钮：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="RoundButton" TargetType="{x:Type Button}">

        <Setter Property="Content" Value="{Binding Grid}"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type Button}">

                    <Border CornerRadius="100" BorderThickness="2" x:Name="border" 
                            BorderBrush="{TemplateBinding BorderBrush}">

                        <Grid>

                            <ContentPresenter VerticalAlignment="Center" 
                                              HorizontalAlignment="Center" 
                                              x:Name="contentPresenter" Opacity="1" />

                        </Grid>

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>
</ResourceDictionary>

电话图标：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas x:Key="PhoneIcon">

        <Path Stroke="Gray" Data="m 492.438 397.75 -2.375 -7.156 c -5.625 -16.719 -24.063 -34.156 -41 -38.75 l -62.688 -17.125 c -17 -4.625 -41.25 1.594 -53.688 14.031 L 310 371.438 C 227.547 349.157 162.891 284.5 140.641 202.063 l 22.688 -22.688 c 12.438 -12.438 18.656 -36.656 14.031 -53.656 L 160.266 63 C 155.641 46.031 138.172 27.594 121.485 22.031 l -7.156 -2.406 c -16.719 -5.563 -40.563 0.063 -53 12.5 L 27.391 66.094 c -6.063 6.031 -9.938 23.281 -9.938 23.344 -1.187 107.75 41.063 211.562 117.281 287.781 76.031 76.031 179.453 118.219 286.891 117.313 0.563 0 18.313 -3.813 24.375 -9.844 l 33.938 -33.938 c 12.437 -12.437 18.062 -36.281 12.5 -53 z" />

    </Canvas>
</ResourceDictionary>

我已将我的资源词典合并到 App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>

            <ResourceDictionary Source="RoundButton.xaml" />
            <ResourceDictionary Source="Icons.xaml" />

        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

</Application.Resources>

我的问题是，当我显示图像时，它太大了。我已经尝试了很多解决方案，所以我开始忘记我的试错方法。

如何让图片以正确的尺寸显示在按钮的中央？

注意我已经删减了我在这里发布的一些代码 - 但我也测试了我在这里发布的代码，但问题仍然存在。

提前致谢！

Answer 1

您可以在 PhoneIcon 资源中使用 Grid 而不是 Canvas，并设置路径的 Stretch 属性。这会将路径缩放到适合按钮边界的大小：

<Grid x:Key="PhoneIcon">
    <Path Stretch="Uniform" ... />
</Grid>

您甚至可以明确设置网格大小：

<Grid x:Key="PhoneIcon" Width="80">
    <Path Stretch="Uniform" ... />
</Grid>

一个更简单的解决方案是使用没有任何容器的路径：

<Path x:Key="PhoneIcon" Width="80" Stretch="Uniform" ... />

使用 XAML 图像作为按钮内容

Using a XAML image as a button content

wpf

xaml

resourcedictionary