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

lienhua34

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

<div class="postbody"><div id="cnblogs_post_body">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代码如下所示：
<div class="cnblogs_code"> 1 <Window x:Class="WPFTestDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="MainWindow" Height="350" Width="525"> 5     <Window.Resources> 6         <Style x:Key="setHeaderStyle" TargetType="GroupBox"> 7             <Setter Property="Header"> 8                 <Setter.Value> 9                     <StackPanel Orientation="Horizontal">10                         <TextBlock Text="备注" />11                         <TextBlock x:Name="txtStar" Text="*" Foreground="Red" Visibility="Collapsed"/>12                     </StackPanel>13                 </Setter.Value>14             </Setter>15         </Style>16     </Window.Resources>17     <Grid>18         <Grid.RowDefinitions>19             <RowDefinition Height="*" />20             <RowDefinition Height="3*" />21         </Grid.RowDefinitions>22         <GroupBox Grid.Row="0" Margin="4" >23             <StackPanel Orientation="Horizontal">24                 <RadioButton VerticalAlignment="Stretch" Content="可选" IsChecked="True"25                              Command="{Binding Command}" CommandParameter="NoNeed"/>26                 <RadioButton VerticalAlignment="Stretch" Content="必填"27                              Command="{Binding Command}" CommandParameter="Need"/>28             </StackPanel>29         </GroupBox>30         <GroupBox Grid.Row="1" Margin="4" Style="{StaticResource setHeaderStyle}">31             <TextBox ></TextBox>32         </GroupBox>33     </Grid>34 </Window>