如何将一个控件的前景 属性 绑定到另一个控件的前景
How to bind foreground property of a control to another control foreground
我试图解决超链接按钮控件作为项目添加到列表视图时出现的问题。
当项目未被选中时控件显示正常（默认前景是黑色），但是一旦列表视图项目被选中它的内容背景就会变成深蓝色，使得里面的任何黑色文本都很难看清阅读，出于这个原因，listview 项目内的任何文本块控件，其前景 属性（文本颜色）自动更改为白色（这是默认系统行为），问题是，同样的事情不会发生在 a位于该列表视图项目内部的超链接按钮。
请注意，超链接按钮在未被选中时具有透明背景，就像文本块一样，但前景色始终保持黑色，无论包含它的列表视图项目是否被选中。
为了克服这个问题，我尝试在超链接按钮内容中创建一个文本块来显示文本并将其前景绑定 属性 到列表视图项目中的另一个文本块，默认情况下会正确更改其前景，绑定但是似乎不起作用，它只设置一次值，然后再也不会更新，无论何时选择或取消选择列表视图项，绑定都不会反映源代码管理前景的当前前景值 属性.
我在下面提供了一个示例代码来重现我的问题。
<ListView x:Name="Employees_List_View" BorderThickness="1" BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
SelectionMode="Extended" ItemsSource="{x:Bind contact_data_model.contacts}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="50" Margin="0 7 0 7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" FontSize="16" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Name}"></TextBlock>
<TextBlock x:Name="TelelphoneNumberTextBlock" FontSize="12" Grid.Row="1" Grid.Column="1" Text="{Binding TelephoneNumber}" VerticalAlignment="Center"/>
<HyperlinkButton VerticalAlignment="Center" HorizontalAlignment="Center" Click="HyperlinkButton_Click" FontSize="12" Grid.Row="1" Grid.Column="2">
<TextBlock Opacity="1" Foreground="{Binding Foreground, ElementName=TelelphoneNumberTextBlock, Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Grid.Row="1" Grid.Column="2" Text="{Binding EmailInfo}"/>
</HyperlinkButton>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
我的问题可能很容易解决，但我已经搜索了很多但没有成功找到解决这个特定问题的方法。
我能想出的解决这种情况的唯一方法是将超链接按钮内的文本块不透明度设置为 0（因此超链接按钮自动调整大小仍按预期工作）并在顶部创建一个新文本块与按钮本身具有相同文本和位置的按钮，示例：
...
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Grid.Row="1" Grid.Column="2" Text="{Binding EmailInfo}"/>
<HyperlinkButton VerticalAlignment="Center" HorizontalAlignment="Center" Click="HyperlinkButton_Click" FontSize="12" Grid.Row="1" Grid.Column="2">
<TextBlock Opacity="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Grid.Row="1" Grid.Column="2" Text="{Binding EmailInfo}"/>
</HyperlinkButton>
...
这个解决方案很丑陋而且很老套。
我肯定这个问题有一个更优雅的解决方案，但我搜索的所有内容都没有触及这个非常具体的问题，而且我的 xaml 知识非常有限。
这个问题的正确 XAML 解决方案是什么？
更新：
以下是选择 ListViewItem 时更改 HyperlinkBtn 前景色的步骤。
- 您需要为 HyperlinkButton 命名，例如
HyperlinkBtn，以便您可以在 ListView.SelectionChanged event. 中找到该 HyperlinkButton
- 创建一个用于保存最后选择的 HyperlinkButton 的变量。
- 您可以在 SelectionChanged 事件中获取所选项目，现在您可以根据需要更改其前景色。
- 将先前选择的项目颜色更改回正常颜色。
这里是您可以参考的代码：
public HyperlinkButton previousItem { get; set; }
private void Employees_List_View_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var _Container = Employees_List_View.ContainerFromItem(Employees_List_View.SelectedItem);
//get the hyperlink button
var HyperlinkBtn = (HyperlinkButton)FindMyChildByName(_Container, "HyperlinkBtn");
// change the foreground as you want
HyperlinkBtn.Foreground = new SolidColorBrush(Colors.Green);
if (previousItem != null)
{
//change the previous one back to red color if there is a previous one
previousItem.Foreground= new SolidColorBrush(Colors.Red);
}
//record the new Item as previousItem
previousItem = HyperlinkBtn;
}
public static DependencyObject FindMyChildByName(DependencyObject parant, string ControlName)
{
int count = VisualTreeHelper.GetChildrenCount(parant);
for (int i = 0; i < count; i++)
{
var MyChild = VisualTreeHelper.GetChild(parant, i);
if (MyChild is FrameworkElement && ((FrameworkElement)MyChild).Name == ControlName)
return MyChild;
var FindResult = FindMyChildByName(MyChild, ControlName);
if (FindResult != null)
return FindResult;
}
return null;
}
对于您的情况，我建议您覆盖 HyperlinkButton 的默认样式。您可以将样式中 HyperlinkButton 的前景色更改为您想要的任何颜色。您还可以在样式中更改 HyperlinkButton 的其他行为。
这是我做的例子，我改变了不同状态的前景色。正常时为红色，指针悬停时为黄色，按下时为蓝色。
Xaml:
<Page.Resources>
<Style x:Key="HyperlinkButtonStyle1" TargetType="HyperlinkButton">
<Setter Property="Background" Value="{ThemeResource HyperlinkButtonBackground}"/>
<Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="BorderBrush" Value="{ThemeResource HyperlinkButtonBorderBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource HyperlinkButtonBorderThemeThickness}"/>
<Setter Property="Padding" Value="{StaticResource HyperlinkButtonPadding}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="FocusVisualMargin" Value="-3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw"
BackgroundSizing="{TemplateBinding BackgroundSizing}"
Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" CornerRadius="{TemplateBinding CornerRadius}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushPressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonForegroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushDisabled}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
并像这样使用它：
<HyperlinkButton Style="{StaticResource HyperlinkButtonStyle1}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Grid.Row="1" Grid.Column="2" Content="{Binding EmailInfo}">
我试图解决超链接按钮控件作为项目添加到列表视图时出现的问题。
当项目未被选中时控件显示正常（默认前景是黑色），但是一旦列表视图项目被选中它的内容背景就会变成深蓝色，使得里面的任何黑色文本都很难看清阅读，出于这个原因，listview 项目内的任何文本块控件，其前景 属性（文本颜色）自动更改为白色（这是默认系统行为），问题是，同样的事情不会发生在 a位于该列表视图项目内部的超链接按钮。
请注意，超链接按钮在未被选中时具有透明背景，就像文本块一样，但前景色始终保持黑色，无论包含它的列表视图项目是否被选中。
为了克服这个问题，我尝试在超链接按钮内容中创建一个文本块来显示文本并将其前景绑定 属性 到列表视图项目中的另一个文本块，默认情况下会正确更改其前景，绑定但是似乎不起作用，它只设置一次值，然后再也不会更新，无论何时选择或取消选择列表视图项，绑定都不会反映源代码管理前景的当前前景值 属性.
我在下面提供了一个示例代码来重现我的问题。
<ListView x:Name="Employees_List_View" BorderThickness="1" BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
SelectionMode="Extended" ItemsSource="{x:Bind contact_data_model.contacts}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="50" Margin="0 7 0 7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" FontSize="16" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Name}"></TextBlock>
<TextBlock x:Name="TelelphoneNumberTextBlock" FontSize="12" Grid.Row="1" Grid.Column="1" Text="{Binding TelephoneNumber}" VerticalAlignment="Center"/>
<HyperlinkButton VerticalAlignment="Center" HorizontalAlignment="Center" Click="HyperlinkButton_Click" FontSize="12" Grid.Row="1" Grid.Column="2">
<TextBlock Opacity="1" Foreground="{Binding Foreground, ElementName=TelelphoneNumberTextBlock, Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Grid.Row="1" Grid.Column="2" Text="{Binding EmailInfo}"/>
</HyperlinkButton>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
我的问题可能很容易解决，但我已经搜索了很多但没有成功找到解决这个特定问题的方法。
我能想出的解决这种情况的唯一方法是将超链接按钮内的文本块不透明度设置为 0（因此超链接按钮自动调整大小仍按预期工作）并在顶部创建一个新文本块与按钮本身具有相同文本和位置的按钮，示例：
...
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Grid.Row="1" Grid.Column="2" Text="{Binding EmailInfo}"/>
<HyperlinkButton VerticalAlignment="Center" HorizontalAlignment="Center" Click="HyperlinkButton_Click" FontSize="12" Grid.Row="1" Grid.Column="2">
<TextBlock Opacity="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Grid.Row="1" Grid.Column="2" Text="{Binding EmailInfo}"/>
</HyperlinkButton>
...
这个解决方案很丑陋而且很老套。 我肯定这个问题有一个更优雅的解决方案，但我搜索的所有内容都没有触及这个非常具体的问题，而且我的 xaml 知识非常有限。
这个问题的正确 XAML 解决方案是什么？
更新：
以下是选择 ListViewItem 时更改 HyperlinkBtn 前景色的步骤。
- 您需要为 HyperlinkButton 命名，例如
HyperlinkBtn，以便您可以在ListView.SelectionChanged event. 中找到该 HyperlinkButton
- 创建一个用于保存最后选择的 HyperlinkButton 的变量。
- 您可以在 SelectionChanged 事件中获取所选项目，现在您可以根据需要更改其前景色。
- 将先前选择的项目颜色更改回正常颜色。
这里是您可以参考的代码：
public HyperlinkButton previousItem { get; set; }
private void Employees_List_View_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var _Container = Employees_List_View.ContainerFromItem(Employees_List_View.SelectedItem);
//get the hyperlink button
var HyperlinkBtn = (HyperlinkButton)FindMyChildByName(_Container, "HyperlinkBtn");
// change the foreground as you want
HyperlinkBtn.Foreground = new SolidColorBrush(Colors.Green);
if (previousItem != null)
{
//change the previous one back to red color if there is a previous one
previousItem.Foreground= new SolidColorBrush(Colors.Red);
}
//record the new Item as previousItem
previousItem = HyperlinkBtn;
}
public static DependencyObject FindMyChildByName(DependencyObject parant, string ControlName)
{
int count = VisualTreeHelper.GetChildrenCount(parant);
for (int i = 0; i < count; i++)
{
var MyChild = VisualTreeHelper.GetChild(parant, i);
if (MyChild is FrameworkElement && ((FrameworkElement)MyChild).Name == ControlName)
return MyChild;
var FindResult = FindMyChildByName(MyChild, ControlName);
if (FindResult != null)
return FindResult;
}
return null;
}
对于您的情况，我建议您覆盖 HyperlinkButton 的默认样式。您可以将样式中 HyperlinkButton 的前景色更改为您想要的任何颜色。您还可以在样式中更改 HyperlinkButton 的其他行为。
这是我做的例子，我改变了不同状态的前景色。正常时为红色，指针悬停时为黄色，按下时为蓝色。
Xaml:
<Page.Resources>
<Style x:Key="HyperlinkButtonStyle1" TargetType="HyperlinkButton">
<Setter Property="Background" Value="{ThemeResource HyperlinkButtonBackground}"/>
<Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="BorderBrush" Value="{ThemeResource HyperlinkButtonBorderBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource HyperlinkButtonBorderThemeThickness}"/>
<Setter Property="Padding" Value="{StaticResource HyperlinkButtonPadding}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="FocusVisualMargin" Value="-3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw"
BackgroundSizing="{TemplateBinding BackgroundSizing}"
Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" CornerRadius="{TemplateBinding CornerRadius}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushPressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonForegroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBackgroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HyperlinkButtonBorderBrushDisabled}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
并像这样使用它：
<HyperlinkButton Style="{StaticResource HyperlinkButtonStyle1}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Grid.Row="1" Grid.Column="2" Content="{Binding EmailInfo}">