Question

我是WPF的新手并尝试创建一些简单的项目。我创建了一个带按钮的窗口。然后我需要创建相同的按钮，但我不明白如何从存在按钮创建模板？这是代码：

<Grid Background="Black">
        <ToggleButton x:Name="btn" Content="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White">
            <ToggleButton.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="1"/>
                    <GradientStop Color="#FF5D5D5D"/>
                </LinearGradientBrush>
            </ToggleButton.BorderBrush>
            <ToggleButton.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE43DFF" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.997"/>
                </LinearGradientBrush>
            </ToggleButton.Background>
        </ToggleButton>
    </Grid>

我们看到网格上有单个按钮。我需要创建很多相同的按钮并需要一个模板。如何制作模板？内部问题可以BorderBrush成为模板吗？我问，因为将来我需要制作一个不同的按钮（如红色，绿色，洋红色等），并且在我的代码中可以看到相同的边框。谢谢！

Answer 1

您不需要模板，可以使用样式执行此操作：

<Window.Resources>
    <Style x:Key="PurpleButton" TargetType="{x:Type ToggleButton}">
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="1"/>
                    <GradientStop Color="#FF5D5D5D"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE43DFF" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.997"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid Background="Black">
    <ToggleButton x:Name="btn" Style="{StaticResource PurpleButton}" Content="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White" />
    <ToggleButton Style="{StaticResource PurpleButton} Content="2" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White"" />
</Grid>

Answer 2

这是一个具有触发器实现的样式的示例。通过这种方式使用控件模板，您可以创建和设计自己的按钮类型。

<Style x:Key="ButtonNormal" TargetType="Button">
  <Setter Property="Height" Value="40" />
  <Setter Property="FontSize" Value="18" />
  <Setter Property="Foreground" Value="#18272d" />
  <Setter Property="Template">
    <Setter.Value>

    <ControlTemplate TargetType="Button">
      <Border x:Name="ButtonBorder" 
              CornerRadius="4" 
              BorderThickness="1" 
              BorderBrush="#adcae6"
             >
        <Border.Background>
          <LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
            <GradientStop Color="#ffffff" Offset="0"/>
            <GradientStop Color="#e2eaf6" Offset="0.4"/>
          </LinearGradientBrush>
        </Border.Background>
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="1.7*"/>
          </Grid.RowDefinitions>
          <ContentPresenter x:Name="ButtonContentPresenter"
                            VerticalAlignment="Center"  
                            HorizontalAlignment="Center" 
                            Grid.RowSpan="2" />
        </Grid>

      </Border>


      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter TargetName="ButtonBorder" Property="Background" >
            <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
                <GradientStop Color="#d6e2f3" Offset="0"/>
                <GradientStop Color="#fff" Offset="0.9"/>
              </LinearGradientBrush>
            </Setter.Value>
          </Setter>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
          <Setter TargetName="ButtonBorder" Property="Background" >
            <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
                <GradientStop Color="#bed0ed" Offset="0"/>
                <GradientStop Color="#fff" Offset="0.9"/>
              </LinearGradientBrush>
            </Setter.Value>

          </Setter>
          <Setter Property="BorderBrush" Value="#7ba7d1" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
          <Setter TargetName="ButtonBorder" Property="Background">
            <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
                <GradientStop Color="#f6f6f6" Offset="0"/>
                <GradientStop Color="#eaeaea" Offset="0.9"/>
              </LinearGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Foreground" Value="DarkGray"></Setter>
        </Trigger>
      </ControlTemplate.Triggers>

    </ControlTemplate>
  </Setter.Value>
</Setter>

希望这有助于更好地概述样式/模板的工作原理。

从控件创建模板

2 个答案: