Question

我有一个名为Channel的模型，由一些属性组成，如ChannelString，IsSet等，然后有一个ObservableCollection of Channel。

视图模型：

Channels = new ObservableCollection<Channel>();
PopulateChannels(Channels)

查看：

<ItemsControl ItemsSource="{Binding Path=Channels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Label Content="{Binding Path=ChannelString}" />
                <Label Content="{Binding Path=IsSet}" />
                <Label Content="{Binding Path=AlternationMinute}" />
                <ComboBox ItemsSource="{Binding Path=DataContext.ProfileQuantities, RelativeSource={RelativeSource AncestorType=UserControl}}"
                          SelectedItem="{Binding Path=Profile1Id}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Converter={StaticResource Converter}}" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

到目前为止，它运行良好，这就是它的样子： Profile View

现在我需要添加一些标签，指示这些数量的描述，例如30代表Minutes，False代表它是Set或Not等。这些标签将在另一列中，与这些Horizontal StackPanel相邻，需要与现有组件保持一致。

如果我按照下面所示进行操作，那么这些将不会与ItemsControl中的项目对齐。那么实现这一目标的最佳方法是什么？

<StackPanel Orientation="Vertical">
    <Label>Item Description 1</Label>
    <Label>Item Description 2</Label>
    <Label>Item Description 3</Label>
</StackPanel>
<ItemsControl ItemsSource="{Binding Path=Channels}">
</ItemsControl>

Answer 1

您可以使用 Grid 和 SharedSize 实现此目的：

<StackPanel Grid.IsSharedSizeScope="True" Orientation="Horizontal">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition SharedSizeGroup="FirstRow" />
            <RowDefinition SharedSizeGroup="SecondRow" />
            <RowDefinition SharedSizeGroup="ThirdRow" />
        </Grid.RowDefinitions>

        <Label Grid.Row="0">Item Description 1</Label>
        <Label Grid.Row="1">Item Description 2</Label>
        <Label Grid.Row="2">Item Description 3</Label>
    </Grid>

    <ItemsControl ItemsSource="{Binding Path=Channels}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition SharedSizeGroup="FirstRow" />
                        <RowDefinition SharedSizeGroup="SecondRow" />
                        <RowDefinition SharedSizeGroup="ThirdRow" />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <Label Content="{Binding Path=ChannelString}" />
                    <Label Grid.Row="1" Content="{Binding Path=IsSet}" />
                    <Label Grid.Row="2" Content="{Binding Path=AlternationMinute}" />
                    <ComboBox Grid.Row="3" ItemsSource="{Binding Path=DataContext.ProfileQuantities, RelativeSource={RelativeSource AncestorType=UserControl}}"
                SelectedItem="{Binding Path=Profile1Id}">
                        ...
                    </ComboBox>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

请勿忘记将 IsSharedSizeScope 属性设置为要与其共享高度的行上的 true 和 SharedSizeGroup 。

Share Sizing Properties Between Grids

添加标签，然后添加ItemsControl Binding

1 个答案: