弹出窗口中的文本框影响控制按钮的样式
Text box in a popup effecting a style for the controlling button
我正在尝试为弹出窗口中的列表构建文本过滤器,并在过滤器处于活动状态时通过更改打开弹出窗口的按钮的颜色来通知用户。
我正在使用 MVVM 精简版设置和 XAML 样式 sheet 来引用所需的样式。到目前为止,我已经创建了弹出窗口和控制按钮,我已经能够将鼠标放在按钮上的触发器上并让它工作。但是,当我尝试将数据触发器设置为弹出窗口中文本框的值时,它根本没有响应。
这是视图中用于按钮和弹出窗口的 XAML 代码:
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center" >
<TextBlock HorizontalAlignment="Center" Text="Filter Popup" />
<Button x:Name="PopUpControl" Tag="popup" Style="{StaticResource FilterButtonStyle}" Command="{Binding OpenPopupCommand}" IsEnabled="{Binding IsFilterEnabled, UpdateSourceTrigger=PropertyChanged}" Margin="2,1,2,1" VerticalAlignment="Top"/>
</StackPanel>
<Popup x:Name="textPopup" IsOpen="{Binding IsFilterPopupOpen, Mode=TwoWay}" PlacementTarget="{Binding ElementName=PopUpControl}" Placement="Bottom" Width="Auto" StaysOpen="False" Margin="2 2 2 2">
<TextBox x:Name="TextValue" Grid.Column="0" BorderThickness="1" Style="{StaticResource WatermarkedTextBox}" Margin="2,4" VerticalAlignment="Center" Tag="Text Filter" Text="{Binding FilterSearch, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
<Button Grid.Column="4" Style="{StaticResource SearchIconStyle}" IsEnabled="{Binding FilterEnabled, Mode=TwoWay}" Command="{Binding ApplyFilterCommand}" Margin="19,6" Grid.ColumnSpan="2" />
</Grid>
</Popup>
按钮的样式如下:
<Style x:Key="SortButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="4,0,4,0" />
<Setter Property="Tag" Value="Default" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="{DynamicResource PaleBlue}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="{DynamicResource ColumnHeaderFilterColor}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我希望发生的情况是,当元素 "TextValue" 在文本字段中有一个值时,"border" 的主要背景颜色会改变颜色。任何帮助将不胜感激。
您可以使用 DataTrigger
绑定到 FilterSearch
来源 属性 并设置 属性 如果 returns 为空 string
或 null
:
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="Green">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding FilterSearch}" Value="">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
<DataTrigger Binding="{Binding FilterSearch}" Value="{x:null}">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
我正在尝试为弹出窗口中的列表构建文本过滤器,并在过滤器处于活动状态时通过更改打开弹出窗口的按钮的颜色来通知用户。
我正在使用 MVVM 精简版设置和 XAML 样式 sheet 来引用所需的样式。到目前为止,我已经创建了弹出窗口和控制按钮,我已经能够将鼠标放在按钮上的触发器上并让它工作。但是,当我尝试将数据触发器设置为弹出窗口中文本框的值时,它根本没有响应。
这是视图中用于按钮和弹出窗口的 XAML 代码:
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center" >
<TextBlock HorizontalAlignment="Center" Text="Filter Popup" />
<Button x:Name="PopUpControl" Tag="popup" Style="{StaticResource FilterButtonStyle}" Command="{Binding OpenPopupCommand}" IsEnabled="{Binding IsFilterEnabled, UpdateSourceTrigger=PropertyChanged}" Margin="2,1,2,1" VerticalAlignment="Top"/>
</StackPanel>
<Popup x:Name="textPopup" IsOpen="{Binding IsFilterPopupOpen, Mode=TwoWay}" PlacementTarget="{Binding ElementName=PopUpControl}" Placement="Bottom" Width="Auto" StaysOpen="False" Margin="2 2 2 2">
<TextBox x:Name="TextValue" Grid.Column="0" BorderThickness="1" Style="{StaticResource WatermarkedTextBox}" Margin="2,4" VerticalAlignment="Center" Tag="Text Filter" Text="{Binding FilterSearch, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
<Button Grid.Column="4" Style="{StaticResource SearchIconStyle}" IsEnabled="{Binding FilterEnabled, Mode=TwoWay}" Command="{Binding ApplyFilterCommand}" Margin="19,6" Grid.ColumnSpan="2" />
</Grid>
</Popup>
按钮的样式如下:
<Style x:Key="SortButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="4,0,4,0" />
<Setter Property="Tag" Value="Default" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="{DynamicResource PaleBlue}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="{DynamicResource ColumnHeaderFilterColor}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我希望发生的情况是,当元素 "TextValue" 在文本字段中有一个值时,"border" 的主要背景颜色会改变颜色。任何帮助将不胜感激。
您可以使用 DataTrigger
绑定到 FilterSearch
来源 属性 并设置 属性 如果 returns 为空 string
或 null
:
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="Green">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding FilterSearch}" Value="">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
<DataTrigger Binding="{Binding FilterSearch}" Value="{x:null}">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>