WPF 箭头按钮 - C#

WPF 箭头按钮是一种常见的控件，在WPF中可以用ArrowButton或者ArrowToggleButton控件来实现。

ArrowButton

ArrowButton（箭头按钮）是Button的一个派生类，可以用于实现只包含箭头图标的按钮。以下是一个箭头朝上的ArrowButton的示例：

<Window x:Class="WpfArrowButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Arrow Button Demo" Height="200" Width="300">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <Button Margin="10" Click="Button_Click">Normal Button</Button>
        <Button Margin="10">
            <TextBlock>
                <Run Text="Arrow Button "/>
                <LineBreak/>
                <Run Text="(Up)"/>
            </TextBlock>
            <Button.Template>
                <ControlTemplate>
                    <Path x:Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center"
                          Fill="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"
                          Data="M0,0 L4,4 L8,0" Stretch="UniformToFill" Width="8" Height="4"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter TargetName="arrow" Property="Fill" Value="#FF007ACC"/>
                        </Trigger>
                        <Trigger Property="Button.IsPressed" Value="True">
                            <Setter TargetName="arrow" Property="Fill" Value="#FFFFFFFF"/>
                        </Trigger>
                        <Trigger Property="Button.IsFocused" Value="True">
                            <Setter TargetName="arrow" Property="Stroke" Value="#FF4D4D4D"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </StackPanel>
</Window>

上述代码中，我们使用了一个ControlTemplate来定义ArrowButton的样式。其中，箭头的Path使用了M0,0 L4,4 L8,0来定义。

在ControlTemplate的Trigger中，我们根据按钮的状态来变换箭头的颜色和边框的颜色。

这将会生成一个箭头朝上的按钮，如下所示：

我们还可以在ControlTemplate中定义其他方向的箭头，例如朝下和朝左：

<Path x:Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center"
      Fill="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"
      Data="M0,4 L4,0 L8,4" Stretch="UniformToFill" Width="8" Height="4"/> <!-- Arrow Down -->
<Path x:Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center"
      Fill="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"
      Data="M8,2 L4,6 L0,2" Stretch="UniformToFill" Width="8" Height="8"/> <!-- Arrow Left -->

这将会生成以下两个箭头按钮：

ArrowToggleButton

除了ArrowButton之外，我们还可以使用ArrowToggleButton来实现一些需要切换状态的箭头按钮。以下是一个以箭头朝下为图标的ArrowToggleButton示例：

<Window x:Class="WpfArrowToggleButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Arrow Toggle Button Demo" Height="200" Width="300">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <ToggleButton Margin="10">
            <TextBlock>
                <Run Text="Arrow Button "/>
                <Run Text="(Down)"/>
            </TextBlock>
            <ToggleButton.Template>
                <ControlTemplate>
                    <StackPanel>
                        <Path x:Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center"
                              Fill="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}">
                            <Path.Data>
                                <GeometryGroup>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0,0">
                                            <LineSegment Point="8,0"/>
                                        </PathFigure>
                                    </PathGeometry>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0,4">
                                            <LineSegment Point="8,4"/>
                                        </PathFigure>
                                    </PathGeometry>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0,0">
                                            <LineSegment Point="4,4"/>
                                        </PathFigure>
                                        <PathFigure StartPoint="8,0">
                                            <LineSegment Point="4,4"/>
                                        </PathFigure>
                                    </PathGeometry>
                                </GeometryGroup>
                            </Path.Data>
                            <Path.LayoutTransform>
                                <RotateTransform Angle="0"/>
                            </Path.LayoutTransform>
                        </Path>
                        <ContentPresenter Margin="10"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ToggleButton.IsChecked" Value="True">
                            <Setter TargetName="arrow" Property="LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="180"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                            <Setter TargetName="arrow" Property="Fill" Value="#FF007ACC"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsPressed" Value="True">
                            <Setter TargetName="arrow" Property="Fill" Value="#FFFFFFFF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>
    </StackPanel>
</Window>

我们使用了一个StackPanel来包含箭头Path和ContentPresenter。在控件的ControlTemplate中，我们为Path定义了三个PathGeometry来描述三条线段，以实现箭头朝下的效果。在Trigger中，我们根据ToggleButton的状态来变换箭头的颜色和旋转角度。

这将会生成以下箭头切换按钮：

结论

WPF 箭头按钮提供了一种美观、灵活的方案来实现带有箭头icon的按钮控件。我们可以通过设置ControlTemplate来定义不同方向、不同状态的箭头按钮。