选中时更改网格行的背景颜色

Question

我的itemscontrol正在正确加载每一行。当用户选择它时，我试图让它改变每行的背景颜色。

<Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="100" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0">
                        <Border BorderBrush="#BBBDBF" Background="#F4F4F4" BorderThickness="0,1,0,1" Margin="10,10,10,10"/>
                        <Image  HorizontalAlignment="Left" Margin="10,0,0,0"  Height="38" Width="38" Source="C:\Users\linda_l\Pictures\Cloud upload\database (1).png" />
                        <TextBlock  FontSize="50" Foreground="#4092C2"  Margin="60,0,0,0" HorizontalAlignment="left" Height="69" >Databases</TextBlock>
                    </Grid>

                    <Grid Background="White" Grid.Row="1">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="10" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="70" />
                            <ColumnDefinition Width="10" />
                        </Grid.ColumnDefinitions>

                        <Border BorderBrush="#BBBDBF" BorderThickness="0,0,0,1" Grid.Column="1"  />
                        <Label Grid.Column="1" Content="Server Name" VerticalAlignment="Bottom" FontWeight="Bold" Foreground="#4092C2" />

                        <Border BorderBrush="#BBBDBF" BorderThickness="1,0,0,1" Grid.Column="2" />
                        <Label Grid.Column="2"  Content="Source Database"  VerticalAlignment="Bottom" FontWeight="Bold" Foreground="#4092C2" />

                        <Border BorderBrush="#BBBDBF" BorderThickness="1,0,0,1" Grid.Column="3"  />
                        <Label  Grid.Column="3"  Content="Destination Database"  VerticalAlignment="Bottom" FontWeight="Bold" Foreground="#4092C2" />

                        <Border BorderBrush="#BBBDBF" BorderThickness="1,0,0,1" Grid.Column="4" />
                        <Label  Grid.Column="4"  Content="Status"  VerticalAlignment="Bottom" FontWeight="Bold" Foreground="#4092C2" />

                    </Grid>

                    <ItemsControl x:Name="itemscntrl"  ItemsSource="{Binding DatabaseServers}" Background="White" BorderBrush="WhiteSmoke" BorderThickness="0" Grid.Row="2" Margin="0,5,0,0">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>                               

                                <Grid x:Name="grd"  Background="White" > 

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="10" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="70" />
                                        <ColumnDefinition Width="10" />
                                    </Grid.ColumnDefinitions>
                                    <Image Source="{Binding StatusImage}" Height="10" Width="10" />
                                    <Label Grid.Column="1" HorizontalAlignment="Left" Content="{Binding ServerName}" />
                                    <Label Grid.Column="2" HorizontalAlignment="Left" Content="{Binding SourceDatabase}" />
                                    <TextBox x:Name="dst"  Grid.Column="3"  Text="{Binding DestinationDatabase , Mode=TwoWay, UpdateSourceTrigger=LostFocus}" VerticalAlignment="Top" />
                                    <Label  Grid.Column="4"  Content="{Binding Status}" VerticalAlignment="Top" />
                                    <Button Grid.Column="4" BorderThickness="0" HorizontalAlignment="Center"  Width="50" Margin="3" Content="{Binding Status}" Command="{Binding EnabledCommand}" CommandParameter="{Binding}" />
                                </Grid>
                                <DataTemplate.Triggers>
                                    <DataTrigger Binding="{Binding selected }" Value="True">
                                        <Setter Property="Background" Value="Yellow" TargetName="dst" />
                                    </DataTrigger>
                                </DataTemplate.Triggers>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Grid>

目前看起来像这样：

我尝试添加DataTemplate.Triggers，但它不会做任何事情。您究竟如何检测到itemscontrol中的行已被选中？我找到的唯一示例使用datagrid。我尝试将我的更改为datagrid而不是itemscontrol，但之后它不会加载数据。

的Datagrid：

 <DataGrid x:Name="grd"  Background="White" DataContext="{Binding DatabaseServers}" Grid.Row="2"> 


                                    <Image Source="{Binding StatusImage}" Height="10" Width="10" />
                                    <Label Grid.Column="1" HorizontalAlignment="Left" Content="{Binding ServerName}" />
                                    <Label Grid.Column="2" HorizontalAlignment="Left" Content="{Binding SourceDatabase}" />
                                    <TextBox x:Name="dst"  Grid.Column="3"  Text="{Binding DestinationDatabase , Mode=TwoWay, UpdateSourceTrigger=LostFocus}" VerticalAlignment="Top" />
                                    <Label  Grid.Column="4"  Content="{Binding Status}" VerticalAlignment="Top" />
                                    <Button Grid.Column="4" BorderThickness="0" HorizontalAlignment="Center"  Width="50" Margin="3" Content="{Binding Status}" Command="{Binding EnabledCommand}" CommandParameter="{Binding}" />
                                </DataGrid>

只显示一堆行，每行没有数据。

我对WPF很新，所以我无法弄清楚我在这里做错了什么。

Answer 1

使用DataGrid

MVVM使用<Grid Margin="10"> <StackPanel Orientation="Vertical"> <Label Content="DataBases" Width="150" Height="50" HorizontalAlignment="Left" FontSize="20"/> <DataGrid Name="DgDataSource" AutoGenerateColumns="False" CanUserAddRows="False" ItemsSource="{Binding SourceData}"> <DataGrid.Columns> <DataGridTextColumn Header="ServerName" Binding="{Binding ServerName}" Width="2*"/> <DataGridTextColumn Header="SourceDatabase" Binding="{Binding SourceDatabase}" Width="2*"/> <DataGridTextColumn Header="DestinationDatabase" Binding="{Binding DestinationDatabase}" Width="2*"/> <DataGridTemplateColumn Width="*" Header="Status" > <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Button Content="{Binding Status}" Command="{Binding EnabledCommand}"></Button> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> </StackPanel> </Grid> 即可

<强> Window.xaml

 public class WindowViewModel
    {
        public ObservableCollection<DataSource> SourceData { get; set; }

        public WindowViewModel()
        {
            Initialize();
        }
        private void Initialize()
        {
            SourceData = new ObservableCollection<DataSource>
            {
                new DataSource() {Status = "Stop", ServerName = "Test 1", SourceDatabase = "Unknown",DestinationDatabase = "blabla....."},
                new DataSource() {Status = "Work", ServerName = "Test 2", SourceDatabase = "Unknown",DestinationDatabase = "blabla....."},
                new DataSource() {Status = "Stop", ServerName = "Test 3", SourceDatabase = "Unknown",DestinationDatabase = "blabla....."}
            };
        }
    }

查看模型

 public class DataSource
    {
        public string Status { get; set; }

        public string ServerName { get; set; }

        public string SourceDatabase { get; set; }

        public string DestinationDatabase { get; set; }

    }

<强> 模型

{{1}}