XAML wpf - A multistage button

ijxebb2r  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(137)

我想实现一个按钮,它有4个阶段(阶段1/阶段2/阶段3/阶段4),我想单击它,文本和样式将发生变化(阶段1-〉阶段2-〉阶段3-〉阶段4-〉阶段1-〉...)
下面是我的XAML按钮代码。

<ControlTemplate x:Key="StageButton" TargetType="{x:Type Button}">
    <Button 
        Width="102"
        Tag="1"
        Click="Hello_Click"
        BorderThickness="0"
        Background="Transparent"
        Cursor="Hand">
        <Border
            BorderThickness="2"
            BorderBrush="Gray"
            CornerRadius="10"
            Background="Green"
            Width="100"
            Height="20"
            >
            <TextBlock 
                Width="100"
                Foreground="White"
                FontWeight="Bold"
                FontSize="12" 
                Padding="14 1 0 0"
                Text="Stage1"
                />
        </Border>
    </Button>
</ControlTemplate>

多谢帮忙

wixjitnu

wixjitnu1#

您可以创建一个具有增量阶段(从1开始)功能的自定义Button

using System;
using System.Windows;
using System.Windows.Controls;

public class StagedButton : Button
{
    public int Stage
    {
        get { return (int)GetValue(StageProperty); }
        set { SetValue(StageProperty, value); }
    }
    public static readonly DependencyProperty StageProperty =
        DependencyProperty.Register("Stage", typeof(int), typeof(StagedButton),
            new FrameworkPropertyMetadata(1, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, null,
                (d, baseValue) => Math.Min(((StagedButton)d).StageCount, Math.Max(1, (int)baseValue))));

    public int StageCount
    {
        get { return (int)GetValue(StageCountProperty); }
        set { SetValue(StageCountProperty, value); }
    }
    public static readonly DependencyProperty StageCountProperty =
        DependencyProperty.Register("StageCount", typeof(int), typeof(StagedButton),
            new PropertyMetadata(1, null,
                (d, baseValue) => Math.Max(1, (int)baseValue)));

    protected override void OnClick()
    {
        var stage = Stage;
        Stage = (++stage <= StageCount) ? stage : 1;

        base.OnClick();
    }
}

StageCount是级数。(d, baseValue) => ...部分用于过滤掉无效值。
然后定义此Button的样式。

<Style x:Key="StagedButtonStyle" TargetType="{x:Type local:StagedButton}">
    <Setter Property="Width" Value="100"/>
    <Setter Property="Height" Value="20"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="BorderBrush" Value="LightGray"/>
    <Setter Property="Background" Value="#c42a1c"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="TextElement.FontWeight" Value="Bold"/>
    <Setter Property="TextElement.FontSize" Value="12"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:StagedButton}">
                <Border BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        CornerRadius="10">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <!-- Set 4 to StageCount. -->
    <Setter Property="StageCount" Value="4"/>
    <Style.Triggers>
        <!-- Define Background for each Stage (up to 4) except default one. -->
        <Trigger Property="Stage" Value="2">
            <Setter Property="Background" Value="DodgerBlue"/>
        </Trigger>
        <Trigger Property="Stage" Value="3">
            <Setter Property="Background" Value="Green"/>
        </Trigger>
        <Trigger Property="Stage" Value="4">
            <Setter Property="Background" Value="DimGray"/>
        </Trigger>
    </Style.Triggers>
</Style>

如果需要,可以增加阶段数。
其用法如下:

<local:StagedButton Style="{StaticResource StagedButtonStyle}">
    <TextBlock Text="{Binding Stage, RelativeSource={RelativeSource AncestorType={x:Type local:StagedButton}}, StringFormat=Stage {0}}"/>
</local:StagedButton>

相关问题