单击 ItemsControl 时更改网格背景颜色

Question

我在 Grid 中有以下 ItemsControl。

 <Grid Grid.Row="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
 <Border Grid.Row="0" Grid.Column="0" Margin="5" BorderThickness="1" BorderBrush="{StaticResource ControlBorder}" Background="{StaticResource ControlBackground}">
    <ItemsControl ItemsSource="{Binding MyCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="2"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding}" Margin="1"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
 </Border>

我想在鼠标单击 ItemsControl 中的项目时更改网格单元格的背景。我该怎么做？

Answer 1

您可以使用 MouseLeftButtonDown 事件在 ContentControl 之外定义 Grid 如果它被点击改变你的网格背景

Xaml:

 <Grid x:Name="MyGrid" Grid.Row="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Row="0" Grid.Column="0" Margin="5" BorderThickness="1" BorderBrush="{StaticResource ControlBorder}" Background="{StaticResource ControlBackground}">
            <ItemsControl ItemsSource="{Binding MyCollection}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="2"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="GridInsideDataTemplate" VerticalAlignment="Top" MouseLeftButtonDown="Grid_MouseLeftButtonDown">
                            <ContentControl Content="{Binding}" Margin="10"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Border>

    </Grid>

代码：

private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    MyGrid.Background = Brushes.Green;
}

已编辑：

由于您希望完全在 XAML 中执行此操作。

在 KeyTime 为“0”的 MouseDown 事件上使用事件触发器

<DataTemplate>
    <Grid x:Name="GridInsideDataTemplate" VerticalAlignment="Top">
      <Grid.Style>
        <Style TargetType="Grid">
           <Setter Property="Background">
             <Setter.Value>
                <SolidColorBrush Color="Yellow"/>
             </Setter.Value>
           </Setter>
        <Style.Triggers>
           <EventTrigger RoutedEvent="MouseDown">
               <BeginStoryboard>
                  <Storyboard>                                                    
                     <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
                        <EasingColorKeyFrame KeyTime="0" Value="Green" />                                                    
                     </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                   </BeginStoryboard>
                </EventTrigger>
              </Style.Triggers>
            </Style>
          </Grid.Style>

         <ContentControl Content="{Binding}" Margin="10"/>

   </Grid>
 </DataTemplate>

或者您可以将样式定义为资源并将其用于任何网格

<Grid x:Name="GridInsideDataTemplate"
      Style="{StaticResource GridStyle}"      
      VerticalAlignment="Top">

          <ContentControl Content="{Binding}" Margin="10"/>
</Grid>

Answer 2

您可以在 ItemTemplate 中处理 ContentControl 的 MouseLeftButtonDown 事件，在可视化树中找到父 Border 并更改 Background其中：

private void ContentControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    ItemsControl ic = FindParent<ItemsControl>(sender as DependencyObject);
    if (ic != null)
    {
        Border border = ic.Parent as Border;
        if (border != null)
            border.Background = Brushes.Blue;
    }
}

private static T FindParent<T>(DependencyObject dependencyObject) where T : DependencyObject
{
    var parent = VisualTreeHelper.GetParent(dependencyObject);
    if (parent == null)
        return null;

    var parentT = parent as T;
    return parentT ?? FindParent<T>(parent);
}

A "cell" 由 Grid 特定位置的元素定义，即本例中的 Border 元素。

单击 ItemsControl 时更改网格背景颜色

Change grid background colour when ItemsControl is clicked

wpf

xaml

itemscontrol