lienhua34 发表于 2013-1-3 15:35:40

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

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

<div class="postbody"><div id="cnblogs_post_body">1.问题需求

有一个界面,界面上有一组单选按钮(一个是“可选”,另一个是“必填”),还有一个“备注”信息的文本输入框。现在要求在选择“必填”时,“备注”信息不能为空,此时应该在“备注”文本框前显示必填标志(常用的是“*”),如图2所示;而在选在“可选”时,“备注”信息可为空,此时必填标志“*”应该隐藏起来,如图1所示。
http://pic002.cnblogs.com/images/2012/382408/2012091321490792.png
图1 备注可选
http://pic002.cnblogs.com/images/2012/382408/2012091321493129.png
图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>
页: [1]
查看完整版本: 【小技巧积累】用Style实现必填提示“*”根据选项的不同而显示或隐藏