【小技巧积累】用Style实现必填提示“*”根据选项的不同而显示或隐藏

1.问题需求

有一个界面，界面上有一组单选按钮（一个是“可选”，另一个是“必填”），还有一个“备注”信息的文本输入框。现在要求在选择“必填”时，“备注”信息不能为空，此时应该在“备注”文本框前显示必填标志（常用的是“*”），如图2所示；而在选在“可选”时，“备注”信息可为空，此时必填标志“*”应该隐藏起来，如图1所示。

图1 备注可选

图2 备注必填

2.问题分析

当然，这个问题实际上很简单。如果是文本“备注”是通过TextBlock和文本输入框放在同一个GroupBox中，那么我们可以在“备注”TextBlock和文本输入框之间加一个显示“*”的TextBlock（为了描述方便，假设将其命名为tbStar）。则在选择“可选”时，将tbStar的Visibility属性设置为Hidden（隐藏）；而在选择“必填”时，将tbStar的Visibility属性设置为Visible（可见）。至于，如何响应选择“可选”还是选择“必填”，我们可以使用事件和可以使用命令，这个不是这里要讲的重点，我们下面的代码中用了命令。

 

但是，通过图1和图2，我们看到此处的难点是：“备注”和“*”不是显示在GroupBox控件内部的，而是显示在GroupBox的Header属性中的。对于Header属性的设置，我们不可能直接将两个TextBlock控件（一个用于显示“备注”，一个用于显示“*”）设置为其值。于是，我们这里采用样式Style来实现。

3.实现代码

关于界面的XAML代码如下所示：

<Window x:Class="WPFTestDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="setHeaderStyle" TargetType="GroupBox">
            <Setter Property="Header">
                <Setter.Value>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="备注" />
                        <TextBlock x:Name="txtStar" Text="*" Foreground="Red" Visibility="Collapsed"/>
                    </StackPanel>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="3*" />
        </Grid.RowDefinitions>
        <GroupBox Grid.Row="0" Margin="4" >
            <StackPanel Orientation="Horizontal">
                <RadioButton VerticalAlignment="Stretch" Content="可选" IsChecked="True"
                             Command="{Binding Command}" CommandParameter="NoNeed"/>
                <RadioButton VerticalAlignment="Stretch" Content="必填"
                             Command="{Binding Command}" CommandParameter="Need"/>
            </StackPanel>
        </GroupBox>
        <GroupBox Grid.Row="1" Margin="4" Style="{StaticResource setHeaderStyle}">
            <TextBox ></TextBox>
        </GroupBox>
    </Grid>
</Window>

从上面的代码第30行可见，控件GroupBox引用了静态资源setHeaderStyle。而从第6-15行可见，资源setHeaderStyle通过Setter设置了GroupBox的Header属性为一个StackPanel控件，而在StackPanel中提供了两个TextBlock，一个显示“备注”，一个显示“*”。第24-27行代码显示我们通过命令来响应单选按钮“可选”和“必填”的选择，这里的命令绑定到DataContext的Command属性。下面是界面的视图代码实现，

public partial class MainWindow : Window
{
    private ViewModel viewModel = new ViewModel();

    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this.viewModel;
        this.viewModel.Command.ExecuteEvent += new Action<Object>(
            delegate(object obj)
            {
                OptionEnum oe = OptionEnum.NoNeed;
                Enum.TryParse<OptionEnum>((string)obj, out oe);
                if (oe == OptionEnum.NoNeed)
                {
                    TextBlock tb = GetTextBlockStar();
                    tb.Visibility = Visibility.Hidden;
                }
                else
                {
                    TextBlock tb = GetTextBlockStar();
                    tb.Visibility = Visibility.Visible;
                }
            });
    }
    private TextBlock GetTextBlockStar()
    {
        Style style = (Style)this.FindResource("setHeaderStyle");
        Setter sb = (Setter)style.Setters[0];
        StackPanel sp = (StackPanel)sb.Value;
        return (TextBlock)sp.Children[1];
    }
}

上面代码中的第9-24行的代码就是定义了用于响应单选按钮选择的命令，在第16-17行时，判断出选择了“可选”单选按钮，此时设置显示“*”的TextBlock控件的Visibility属性为Hidden（隐藏）；而在第21-22行判断出选择了“必填”单选按钮，此时设置显示“*”的TextBlock控件的Visibility属性为Visible（可见）。而我们如何获取显示“*”的TextBlock控件呢？在辅助方法GetTextBlockStar()中，我们通过Window的FindResource()方法来获取Key为setHeaderStyle的资源，然后再一步步地深入去找到显示“*”的TextBlock控件（这里就不一一说明了）。关于其他的辅助代码如下所示（这些代码就不一一分析）。

public class ViewModel
{
    private MyCommand command;
    public MyCommand Command
    {
        get { return command; }
        set { command = value; }
    }

    public ViewModel()
    {
        command = new MyCommand();
    }
}

public class MyCommand : ICommand
{
    public event Action<Object> ExecuteEvent;

    public bool CanExecute(object parameter)
    {
        return ExecuteEvent != null;
    }

    public void Execute(Object parameter)
    {
        if (ExecuteEvent != null)
        {
            ExecuteEvent(parameter);
        }
    }

    public event EventHandler CanExecuteChanged;
}

public enum OptionEnum
{
    NoNeed,
    Need
}