Question

如何将以下XAML代码集成到按钮背景中。我已经尝试了很多方法，但我正努力让它发挥作用。 PS我是XAML的新人。

    <Viewbox Width="55.247" Height="55.247"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Width="55.247" Height="55.247">

  <Canvas>

  <!-- button/circle -->
  <Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
    <Path.Fill>
      <RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
        <RadialGradientBrush.GradientStops>
          <GradientStop Offset="0.00" Color="#ff00aae4"/>
          <GradientStop Offset="1.00" Color="#ff2463a7"/>
        </RadialGradientBrush.GradientStops>
        <RadialGradientBrush.Transform>
          <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
        </RadialGradientBrush.Transform>
      </RadialGradientBrush>
    </Path.Fill>
  </Path>

  </Canvas>
</Canvas>
</Viewbox>

Answer 1

以下示例将标准按钮模板替换为您的设计并添加内容展示器，以便您仍然可以设置按钮的内容。

<Button Content="OK" Width="75" Height="75">
    <Button.Template>
        <ControlTemplate TargetType="Button">

            <Grid>
                <Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
                  <Path.Fill>
                      <RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
                          <RadialGradientBrush.GradientStops>
                              <GradientStop Offset="0.00" Color="#ff00aae4"/>
                              <GradientStop Offset="1.00" Color="#ff2463a7"/>
                          </RadialGradientBrush.GradientStops>
                          <RadialGradientBrush.Transform>
                              <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
                          </RadialGradientBrush.Transform>
                      </RadialGradientBrush>
                 </Path.Fill>
             </Path>
             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>

    </ControlTemplate>
</Button.Template>

Answer 2

你有多种方法可以做到这一点。如果你真的只是想把你的Path放在一个按钮上，你可以用最小的努力来做到这一点;

<Button Width="75" Height="75">
    <!-- Embed our elements in a grid since Content can be set only once -->
    <Grid>
        <!-- Your Path -->
        <Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
          <Path.Fill>
            <RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0.00" Color="#ff00aae4"/>
                <GradientStop Offset="1.00" Color="#ff2463a7"/>
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <!-- Your Button Text -->
        <TextBlock Text="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Button>

如果您需要获得更多技术/清洁，您只需将其直接放入控件模板即可。以下是WPF Button Control Template

的文档

希望这会有所帮助，幸运的是，网上还有很多关于自定义WPF按钮的教程。如果你想详细说明你想要什么，比如你是否特别为WPF或SL拍摄（像VisualStateManager或Style Triggers这样的差异），那么人们可能会更有用。：）

在XAML中更改按钮背景？

2 个答案: