Question

我需要将对象ObservableCollection<RegisterBean> listOfRegisters的可更新列表RegisterBean表示为具有行和列标题的矩阵对象包含3个属性：

byte deviceAddress;
byte register;
byte[] data;

并且仅应显示一个属性 data 。预期结果如图片所示： Expected

我使用通常的datagrid到达了此结构，但是问题是要对其进行更新，因为我使用了以new DataTable()作为返回值的转换器。这是不正确的，因为它会闪烁并重新渲染所有对象。

我昨天here寻求帮助。并且此解决方案有效：

<ItemsControl ItemsSource="{Binding listOfRegisters}">
   <ItemsControl.ItemsPanel>
       <ItemsPanelTemplate>
           <UniformGrid Columns="16"/>
                </ItemsPanelTemplate>
           </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
           <DataTemplate>
               <TextBox Text="{Binding Data, Converter={StaticResource ByteToStringValueConverter}}"/>
          </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

但是我不明白如何更改用户控件的结构和添加标题。 itemscontrol解决方案的结果： result with usercontrol

谢谢！

UPD： 标题应该是静态的，没有任何排序和类似的东西

Answer 1

我开始说，检查DataGrid的问题可能会更好，并且不必重写控件，但是如果您仍然想使用ItemsControl ...

假设ViewModel中有两个包含Header的集合（ColHeaders和RowHeaders），则可以添加另外两个保存标题的面板。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <!-- Column Headers -->
    <ItemsControl Grid.Column="1" Grid.Row="0"  ItemsSource="{Binding ColHeaders}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}" Width="30" Height="30"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    <ItemsControl Grid.Row="1" Grid.Column="1" ItemsSource="{Binding listOfRegisters}">
       <ItemsControl.ItemsPanel>
           <ItemsPanelTemplate>
               <UniformGrid Columns="16"/>
                    </ItemsPanelTemplate>
               </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
               <DataTemplate>
                   <TextBox Text="{Binding Data, Converter={StaticResource ByteToStringValueConverter}}"/>
              </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    <!-- RowHeaders -->
    <ItemsControl Grid.Column="0" Grid.Row="1" ItemsSource="{Binding RowHeaders}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}" Width="30" Height="30"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

我还调整了TextBlocks和TextBox的大小，以对齐所有内容。

Answer 2

只需在其周围添加一个网格，就像这样：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Row="0" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Content="Col 0"/>
        <Label Grid.Column="1" Content="Col 1"/>
        <Label Grid.Column="2" Content="Col 2"/>
    </Grid>
    <Grid Grid.Row="1" Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Content="Row 0"/>
        <Label Grid.Row="1" Content="Row 1"/>
        <Label Grid.Row="2" Content="Row 2"/>
    </Grid>
    <UniformGrid Rows="3" Columns="3" Grid.Column="1" Grid.Row="1">
        <Button Content="00"/>
        <Button Content="01"/>
        <Button Content="02"/>
        <Button Content="10"/>
        <Button Content="11"/>
        <Button Content="12"/>
        <Button Content="20"/>
        <Button Content="21"/>
        <Button Content="22"/>
    </UniformGrid>
</Grid>

具有行和列标题WPF的ItemsControl

2 个答案: