how to bind specific property in user control in itemscontrol

Question

I have following UserControl :

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

With This 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)));

i want to fill itemscontrol with this usercontrol but after run i have just one checkBox.

this is my windows code :

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

and with this code behind :

           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;

Rhys · Accepted Answer · 2015-08-03 18:38:16Z

2

Your DataTemplate uses a grid as it's layout control. The two UCSeat user controls are placed in this grid without specifying which column they should be located in.

This means both UCSeat controls are placed on top of each other which might make it look as if only one checkbox is being displayed.

Either change the second UCSeat entry to include the Grid.Column="1" to make the second user control show in the second column

OR use a StackPanel container with Orientation="Horizontal" instead of the Grid container meaning both will layout horizontally automatically

answered Aug 3, 2015 at 18:38

Rhys

4,6192 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rachel · Accepted Answer · 2015-08-03 18:30:06Z

You have all the items there, however they are all stacked on top of each other.

To properly layout items you need to set your ItemsPanelTemplate to whatever container you are placing your items in (such as a Grid), and use the ItemContainerStyle to set any specific properties of your items (such as Grid.Row and Grid.Column

Here's some sample XAML taken from my blog post about the ItemsControl

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

This assumes you are binding to a collection of objects that look something like this :

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

And results in something like this :

I'd highly recommend reading the actual post as well if you're new to using an ItemsControl :)

Collectives™ on Stack Overflow

how to bind specific property in user control in itemscontrol

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related