Question

我有以下UserControl：

<Grid x:Name="LayoutRoot">
    <CheckBox x:Name="seat" Margin="2,2,2,2.901" BorderBrush="#FF003FFF" Content="{Binding Path=TypeSSeat, ElementName=UserControl}"  />
</Grid>

使用此CodeBehind：

    [DefaultValue(Nothing)]
public enum TypeSeat
{
   Nothing,FirstClass, businessclass , economyclass ,NoSeat
}
public partial class UCSeat : UserControl
{
    public TypeSeat TypeSSeat
    {

        get
        {
            return (TypeSeat)GetValue(ItemTextProperty);
        }
        set
        {
            SetValue(ItemTextProperty, value);
        }

    }
    public static readonly DependencyProperty ItemTextProperty =
   DependencyProperty.Register("TypeSSeat", typeof(TypeSeat), typeof(UCSeat), new PropertyMetadata(default(TypeSeat)));

我想用这个用户控件填充itemscontrol但是在运行之后我只有一个复选框。

这是我的Windows代码：

        <ItemsControl Name="icName" Height="366"  VerticalAlignment="Top"  ItemsSource="{Binding Path=UCSeat}" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid Margin="0,0,0,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20" />
                        <ColumnDefinition Width="20" />

                    </Grid.ColumnDefinitions>
                    <local:UCSeat HorizontalAlignment="Left" Width="156.8" TypeSSeat="{Binding seat1}" ToolTip="1"/>
                    <local:UCSeat HorizontalAlignment="Left" Width="156.8" TypeSSeat="{Binding seat2}" ToolTip="2"/>

并使用此代码：

           List<SeatList> lst = new List<SeatList>();
         lst.Add(new SeatList { seat1 = TypeSeat.FirstClass, seat2 = TypeSeat.FirstClass, seat3 = TypeSeat.NoSeat, seat4 = TypeSeat.FirstClass, seat5 = TypeSeat.FirstClass, seat6 = TypeSeat.Nothing, seat7 = TypeSeat.Nothing, seat8 = TypeSeat.Nothing, seat9 = TypeSeat.Nothing, seat10 = TypeSeat.Nothing, seat11 = TypeSeat.Nothing, seat12 = TypeSeat.Nothing, seat13 = TypeSeat.Nothing, seat14 = TypeSeat.Nothing });
         icName.ItemsSource = lst;

Answer 1

你拥有所有物品，但它们都堆叠在一起。

要正确布置项目，您需要将ItemsPanelTemplate设置为放置项目的任何容器（例如Grid），并使用ItemContainerStyle设置任何特定属性您的商品（例如Grid.Row和Grid.Column

以下是取自my blog post about the ItemsControl

的一些示例XAML

<ItemsControl ItemsSource="{Binding MyCollection}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Column"
                    Value="{Binding ColumnIndex}" />
            <Setter Property="Grid.Row"
                    Value="{Binding RowIndex}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding Name}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这假设您绑定了一组看起来像这样的对象：

public class MyObjectModel
{
    public string Name { get; set; }
    public int ColumnIndex{ get; set; }
    public int RowIndex{ get; set; }
}

结果是这样的：

如果您不熟悉使用ItemsControl，我强烈建议您阅读实际的post：）

Answer 2

您的DataTemplate使用网格作为其布局控件。两个UCSeat用户控件放在此网格中，而不指定它们应位于哪个列中。

这意味着两个UCSeat控件都放在彼此的顶部，这可能使它看起来好像只显示了一个复选框。

更改第二个UCSeat条目以包含Grid.Column="1"以使第二个用户控件显示在第二列

或使用StackPanel容器Orientation="Horizontal"代替Grid容器，这意味着两者都将自动水平布局

如何在itemscontrol中绑定用户控件中的特定属性

2 个答案: