WPF---Xaml中改变ViewModel的值

在开发中遇到实现如下需求的情景：一个输入框，旁边一个清空输入的按钮，当输入框中有内容时显示清空按钮，点击该按钮可以清空输入框内容，当输入框中无内容时隐藏按钮

 

当然这个需求使用wpf的绑定功能很容易实现

 <TextBox Width="220"
                         Height="32"
                         HorizontalAlignment="Right"
                         HorizontalContentAlignment="Left"
                         VerticalContentAlignment="Center"
                         MaxLength="20"
                         Text="{Binding SearchContent,
                                        UpdateSourceTrigger=PropertyChanged}"
                         pt:WatermarkHelper.WatermarkContent="{lex:LocText Search}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="TextChanged">
                            <i:InvokeCommandAction Command="{Binding TextChangedCommand}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
 </TextBox>
                <pt:IconLabelButton Width="32"
                                    Margin="-32,0,32,0"
                                    Command="{Binding ClearCommand}"
                                    Icon="/Resource;component/res/GeneralClear.png"
                                    Visibility="{Binding IsShowClearButton,
                                                         Converter={StaticResource VisiblityConverter}}" />

 

   public  ICommand      TextChangedCommand = new DelegateCommand<string>(OnTextChangedCommand);  
   public  ICommand      ClearCommand = new DelegateCommand(OnClearCommand);

private void OnTextChangedCommand(string obj)
        {
            if (string.IsNullOrEmpty(SearchContent))
            {
                IsShowClearButton = false;
                return;
            }

            if (SearchContent.Length > 0)
            {
                IsShowClearButton = true;
            }
            else
            {
                IsShowClearButton = false;
            }
        }

   private void OnClearCommand()
        {
            SearchContent = string.Empty;
     
        }

上面思路是通过Textbox的TextChanged事情来处理按钮的显示隐藏。

 

有没更简单的方案，只在xaml中就实现这个需求，毕竟这个跟业务逻辑完全没关系，只是界面上的变化的东西。

经过努力终于找到方案了，下面看实现方法：需要引用 System.Windows.Interactivity“ 和 ”Microsoft.Expression.Interactions”程序集

<TextBox Width="300" Name="tbSearch"
                     Height="30"
                     Style="{DynamicResource TextBoxStyle}"
                           pt:WatermarkHelper.WatermarkContent="{lex:LocText Search}"
                     Text="{Binding SearchText}">
                </TextBox>
                <pt:IconLabelButton Width="32" x:Name="btnClear"
                                    Margin="-32,0,0,0"
                                    Icon="/Resource;component/res/GeneralClear.png">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <ei:ChangePropertyAction  TargetObject="{Binding}"  PropertyName="SearchText" Value="" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <pt:IconLabelButton.Style>
                        <Style BasedOn="{StaticResource IconLabelButtonStyle}" TargetType="{x:Type pt:IconLabelButton}">
                            <Style.Triggers>
                                <DataTrigger    Binding="{ Binding ElementName=tbSearch, Path=Text}"  Value="">
                                    <Setter  Property="Control.Visibility" Value="Hidden" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </pt:IconLabelButton.Style>
                </pt:IconLabelButton>

button控件的显示隐藏通过DataTrigger来实现，通过检测到Textbox的Text属性为空值时，设置属性隐藏。

点击按钮时通过EventTrigger的 ChangePropertyAction   实现， TargetOject绑定到ViewModel， PropertyName设置为TextBox的绑定ViewModel属性，直接改变绑定的属性值实现清空textbox值。

（PS通过ChangePropertyAction 的TargetOject绑定控件， 清空Text属性，可以清空textbox的界面值，但是无法同步textbox的viewmodel绑定值）

 

 

       只有敢于尝试不同方法才可以进步哟，希望这篇文章对大家有帮助