按钮VisualBrush -正确使用图标

Question

我正在开发一个MUI风格的WPF应用程序.我使用的图标，例如：http://modernuiicons.com。

现在，如果我使用以下代码：

<Button x:Name="_ButtonSearch" Background="White" Grid.Column="3" Margin="20,20,20,20" Click="_ButtonSearch_Click" >
    <Button.OpacityMask>
         <VisualBrush Visual="{StaticResource appbar_magnify}" Stretch="Uniform"/>
    </Button.OpacityMask>
</Button>

对“appbar_magnify”使用以下XAML：

<Canvas x:Key="appbar_magnify" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="33.1464" Height="33.1465" Canvas.Left="21.8536" Canvas.Top="22" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 42.5,22C 49.4036,22 55,27.5964 55,34.5C 55,41.4036 49.4036,47 42.5,47C 40.1356,47 37.9245,46.3435 36,45.2426L 26.9749,54.2678C 25.8033,55.4393 23.9038,55.4393 22.7322,54.2678C 21.5607,53.0962 21.5607,51.1967 22.7322,50.0251L 31.7971,40.961C 30.6565,39.0755 30,36.8644 30,34.5C 30,27.5964 35.5964,22 42.5,22 Z M 42.5,26C 37.8056,26 34,29.8056 34,34.5C 34,39.1944 37.8056,43 42.5,43C 47.1944,43 51,39.1944 51,34.5C 51,29.8056 47.1944,26 42.5,26 Z "/>
</Canvas>

我得到以下信息：

​

​

正如你在我画的高亮方块中看到的，按钮切割了图标的一小部分。因此，当您单击程序中的按钮时，它将如下所示：

​

​

被切断的部分现在是黑色的。看起来不太好。

所以我的问题是，我怎样才能改善这种情况？

问候

Answer 1

我似乎找不到确切的原因。这是由Button模板中的ButtonChrome元素造成的。

你可以做两件事中的一件：

1)重写按钮模板。

   <Geometry x:Key="magnifierGeometry">F1 M 42.5,22C 49.4036,22 55,27.5964 55,34.5C 55,41.4036 49.4036,47 42.5,47C 40.1356,47 37.9245,46.3435 36,45.2426L 26.9749,54.2678C 25.8033,55.4393 23.9038,55.4393 22.7322,54.2678C 21.5607,53.0962 21.5607,51.1967 22.7322,50.0251L 31.7971,40.961C 30.6565,39.0755 30,36.8644 30,34.5C 30,27.5964 35.5964,22 42.5,22 Z M 42.5,26C 37.8056,26 34,29.8056 34,34.5C 34,39.1944 37.8056,43 42.5,43C 47.1944,43 51,39.1944 51,34.5C 51,29.8056 47.1944,26 42.5,26 Z </Geometry>

   <ControlTemplate TargetType="{x:Type Button}">
        <Path Stretch="Uniform" Data="{StaticResource magnifierGeometry}"  Fill="{TemplateBinding Foreground}"/>
        </ControlTemplate>

2)使用Viewport定义实现Pad。

注意一个更清晰的创建不透明掩码的方法。

    <Button  Margin="20,20,20,20" BorderThickness="0">
        <Button.OpacityMask>
            <DrawingBrush  Stretch="Uniform" Viewport="0.05,0.05,0.9,0.9" >
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <DrawingGroup.Children>
                                <GeometryDrawing Brush="Blue"  Geometry="{StaticResource magnifierGeometry}" />                                             
                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
        </Button.OpacityMask>
    </Button>