Friday 15 June 2012

Wrap Panel as ListView's item Panel - WrapPanel for ItemsControl


Wrap Panel wraps controls to new lines if no space is left. 

By default, the elements within a wrap panel are placed horizontally from left-to-right, top-to-bottom, but you can also place them vertically from top-to-bottom, left-to-right. Change the Orientation property for a wrap panel within the Properties panel under Layout. (MSDN)

The Orientation can be set to Vertical or Horizontal


Here, I am using a List<> (ItemsSource="{Binding reasonDTO}") for ListView Item Source , Bind the Text="{Binding ReasonDescription}" as Button Content .


<ListView
  ItemsSource="{Binding reasonDTO}"
  Name="ReasonListView"                     
  Height="auto" HorizontalAlignment="Stretch" MinWidth="600" Width="auto">


  <ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
       <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="DarkGreen"/>
 </ListView.Resources>


  <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                                                               ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                                                               MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                                                               ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
                       
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>

                <ListView.ItemTemplate>
                    <DataTemplate>
                                             
                        <Button Width="250"
                                        Height="55"   
                                        MinWidth="150"
                                        Margin="5"
                                        Name="ReasonButton"
                                        Style="{StaticResource RoundButtonTemplate}"                                     
                                    Click="ReasonButton_Click">


                            <Button.Content>
                                <TextBlock Text="{Binding ReasonDescription}"  TextAlignment="Center" Padding="5" Width="200"  TextWrapping="Wrap"/>
                            </Button.Content>
                                                                               
                    </DataTemplate>
                </ListView.ItemTemplate>
               
            </ListView>

2 comments: