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

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 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

Window.xaml

<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>

查看模型

 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; }

    }

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

Change Background color of grid row when selected

c#

wpf

datagrid

wpf-controls