CODEWITHSUNDEEP
c#wpfxaml
Arnab Lahiri
Arnab Lahiri

Reputation: 31

Two column Free Flowing Layout in xaml wpf (MVVM)

I have a collection which I want to render as two or more column layout in xaml in my WPF appliaction.I dont wanna use grid columns as i dont want to fix the number of items in each column.Is there any way to do it with wrap panel,stack panel... etc.

I want something like this

  Mango    Orange       Basil
  Banana   Pomegranate  Tulsi
  Apple    Papaya       ....

Thanks in advance.

Upvotes: 1

Views: 533

Answers (2)

Thomas Bouman
Thomas Bouman

Reputation: 608

Your best choice would be a WrapPanel, you can set a width for the panel and a width for your items. This way you can limit the amount of columns you will have without limiting the amount of items in each column.

Your code should look something like this:

    <WrapPanel Width="600"
           ItemWidth="200">
    <WrapPanel.Resources>
        <Style TargetType="TextBox">
            <Setter Property="BorderThickness" Value="0"/>
        </Style>
    </WrapPanel.Resources>
    <TextBox Text="Mango"/>
    <TextBox Text="Orange"/>
    <TextBox Text="Basil"/>
    <TextBox Text="Banana"/>
    <TextBox Text="Pomgranate"/>
    <TextBox Text="Tulsi"/>
    <TextBox Text="Apple"/>
    <TextBox Text="Papaya"/>
    <TextBox Text="..."/>
</WrapPanel>

Which should look something like this:

WrapPanel example

Upvotes: 1

israel altar
israel altar

Reputation: 1794

You can use ItemTemplate like that:

        <Stack Panel Width = "400">
<ItemTemplate ItemSource ="{Binding someModel}"
   <ItemsControl.ItemTemplate>
      <DataTemplate>
        <TextBlock>
         <Ran Text = "{Binding First}">
         <Ran Text = " " />
         <Ran Text = "{Binding Second}">
         <Ran Text = " " />
         <Ran Text = "{Binding Third}">
         <Ran Text = " " />
         </TextBlock>
      </DataTemplate>
 </ItemsControl.ItemTemplate>
</StackPanel>

in the view model you can write like that:

ObservableCollection<YourModel> someModel ...

and the model will be:

class YourModel
{
public string first  {get; set; }
public string second {get; set; }
public string third  {get; set; }
}

Good luck :)

Upvotes: 0

Related Questions