按钮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>

使用＆＃34; appbar_magnify＆＃34;的以下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）使用视口定义填充它。

注意更清晰的方法来创建不透明蒙版。

    <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>