Question

I have a issue that i want your inouts on. I have a outer grid and it has two columns. On first column i am using a ItemsControl that is bind to a a view model (This view model is for dynamically creating buttons). I have a wrap pannel templete define for the Item templete. The 2nd column is for a list box.

I create the objects for the buttons in the view model and that gets binded to the view.The requiremnet is that if the window hieight fits then all buttons should appear in a single colum (one below the other) else it should come in two columns.

If one column

1

2
3
4

If Two Columns :

1 2
3 4

The code i have is given below :

ItemsControl:

<Grid>...
<ItemsControl ItemsSource="{Binding buttonsViewModelColl}"
           ItemsPanel="{StaticResource WrapPanelTemplateA}"
         ItemTemplate="{StaticResource ButtonsDataTempleteA}" Width="{Binding ActualWidth, ElementName=<OuterGrid>}" Grid.Row="2" HorizontalAlignment="Center"/>     
</Grid>

WrapPannelTemplete:

<ItemsPanelTemplate x:Key="WrapPanelTemplate">
             <WrapPanel/>
         </ItemsPanelTemplate>

DataTempleteForButton :

<DataTemplate x:Key="ButtonsDataTempleteA">
             <Button 
                            Content="{Binding Path=Text}" 
                            IsEnabled="{Binding Path=IsEnabled}"
                             Style="{StaticResource StyleButtonA}" 
                            FontFamily="Segoe UI Semibold"
                             HorizontalAlignment="Left" />
         </DataTemplate>

The problem is that on rendering only one or two buttons are visible. If i set teh WrapPannel Orientation to vertical all comes but they donot wrap automatically. Only if i drap and extend teh width of window all are visible. Also teh sequence is not correct :

They come as :

A C
B D

Any Ideas.

Another question : Is there a way i can increase the width of the inner grid column based on an outer grid height at runtime in XAML ?

Answer 1

I think what you need is a UniformGrid not WrapPanel because you want the total number of buttons, the height of the entire container and the number of columns in the panel to be interdependent. Wrap Panel cannot control the third factor (i.e. number of columns in the panel).

UniformGrid has Rows and Columns property which are perfectly bindable. They can be multi bound to the above 3 factors and a multi value converter can decide what number of rows and columns to display based on some custom heuristic algorithm.

I hope this guides you in correct direction.