WPF Exceed busyindicator + listbox combination style issues - wpf

I am using xceed busyindicator control and listbox with the very simple example. So i have background color of listbox set to black and when isbusy property of busyindicator is set to true. Listbox background color changes to white but for the rest of the control like grids background color remains the same. See example below. I want my listbox color to remain same as what i set but its changes to white when isBusy =true.
<Grid Margin="10">
<xctk:BusyIndicator IsBusy="True">
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="0.50*" />
<RowDefinition Height="0.50*" />
</Grid.RowDefinitions>
<ListBox Background="Black" Foreground="White">
<ListBoxItem>ListBox Item #1</ListBoxItem>
<ListBoxItem>ListBox Item #2</ListBoxItem>
<ListBoxItem>ListBox Item #3</ListBoxItem>
</ListBox>
</Grid>
</xctk:BusyIndicator>
</Grid>

The BusyIndicator has by default a semi-transparent Overlay. Also, it sets the underlying element's IsEnabled=False
You can achieve what you want like this:
<Grid Margin="10">
<Grid.Resources>
<Style x:Key="_BlackListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid Width="Auto" Height="Auto">
<Border x:Name="Border" CornerRadius="0,0,0,0" />
<ScrollViewer
Focusable="false"
HorizontalScrollBarVisibility="Disabled"
IsTabStop="False"
>
<StackPanel IsItemsHost="true" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0,0,0,0" />
</Style>
</Grid.Resources>
<xctk:BusyIndicator IsBusy="True">
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="0.50*" />
<RowDefinition Height="0.50*" />
</Grid.RowDefinitions>
<ListBox IsEnabled="False" Style="{StaticResource _BlackListBoxStyle}">
<ListBoxItem>ListBox Item #1</ListBoxItem>
<ListBoxItem>ListBox Item #2</ListBoxItem>
<ListBoxItem>ListBox Item #3</ListBoxItem>
</ListBox>
</Grid>
<xctk:BusyIndicator.OverlayStyle>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="Transparent" />
</Style>
</xctk:BusyIndicator.OverlayStyle>
</xctk:BusyIndicator>
</Grid>

Related

WPF ListBoxItem Style Not Working

I have a Border inside a DataTemplate for a ListBox. When the mouse is over the item, I want to show the Border. Here's my XAML:
<ListBox Grid.Row="3"
Grid.Column="0"
ItemsSource="{Binding Devices}"
SelectedItem="{Binding SelectedDevice}"
MaxWidth="350">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
</Style.Resources>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="SteelBlue"
BorderThickness="0"
HorizontalAlignment="Stretch"
CornerRadius="3"
MinHeight="65"
Margin="3">
<Border.Style>
<Style>
<Style.Triggers>
<Trigger Property="Border.IsMouseOver" Value="True">
<Setter Property="Border.BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Source="/DFT.Falcon6.UI.Desktop;component/Media/Images/fc6logo.png"
Height="50"
Width="50"
Margin="5"/>
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="{Binding UnitIdentifier}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
<TextBlock Grid.Row="1"
Grid.Column="1"
Text="{Binding IPAddress}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can see that I have a trigger defined in the Border control to set the BorderThickness to 1. However when I run it and mouse over the item, nothing happens.
What am I doing wrong here?
Thanks
Try this:
<Style>
<Setter Property="BorderThickness" Value="0" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
The style is applied to the Border control, so there is no need to specify "Border" again on the bindings. I've found that it sometimes (always?) seems that an attribute defined directly on the control will override the change from a trigger. You will also have to remove the borderTickness attribute from the Border control as well.
Also, keep an eye on the Output Window while running. Binding errors will happen silently in the application, but generally show up as red text in the output window that can sometimes help track down errors.

WPF Change value of Element's Property from BasedOn

I have the following style:
<Style TargetType="{x:Type local:MetroTabControl}">
<Style.Triggers>
<Trigger Property="SingleRow" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MetroTabControl}">
<Grid>
<Grid KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden" Style="{DynamicResource TabPanelScrollViewer}">
<TabPanel x:Name="HeaderPanel" IsItemsHost="True" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1"/>
</ScrollViewer>
<Button x:Name="AddTabItem" Content="" Style="{DynamicResource TabControlButton}" HorizontalAlignment="Right" VerticalAlignment="Top"/>
</Grid>
<Border Grid.Row="1" x:Name="TabPanelBorder" Background="Transparent">
<Rectangle x:Name="TabPanelBorderRectangle" Fill="{StaticResource TabPanelBorderBrush}" Height="2"/>
</Border>
<Border Grid.Row="2" Background="{StaticResource TabControlBackground}"/>
<ContentPresenter Grid.Row="2" Name="PART_SelectedContentHost" ContentSource="SelectedContent"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!--<Setter Property="Template" Value="{StaticResource MetroTabControlSingleRow}" />-->
</Trigger>
<Trigger Property="SingleRow" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MetroTabControl}">
<Grid KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Background="Transparent" BorderThickness="0,0,0,2" BorderBrush="{StaticResource TabPanelBorderBrush}">
<DockPanel LastChildFill="True">
<Button x:Name="AddTabItem" Style="{DynamicResource TabControlButton}" DockPanel.Dock="Right">
<Path Stroke="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Data="M0,4 H8 M4,0 V8" StrokeThickness="2" />
</Button>
<TabPanel x:Name="HeaderPanel" IsItemsHost="True" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1"/>
</DockPanel>
</Border>
<Border Grid.Row="1" Background="{StaticResource TabControlBackground}"/>
<ContentPresenter Grid.Row="1" Name="PART_SelectedContentHost" ContentSource="SelectedContent"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!--<Setter Property="Template" Value="{StaticResource MetroTabControlMultiRows}" />-->
</Trigger>
</Style.Triggers>
</Style>
I want to have another style, BasedOn the above, but with one change - I want to change the Fill Color of the TabPanelBorderRectangle Rectangle.
So, to use the BasedOn I wrote the following:
<Style TargetType="{x:Type local:MetroTabControl}" BasedOn="{StaticResource {x:Type local:MetroTabControl}}">
</Style>
But I have no Idea how to change the color of the TabPanelBorderRectangle Rectangle from the BasedOn Style.
I tried something like
<Setter TargetName="TabPanelBorderRectangle" Property="Fill" Value="Red"/>
but it doesnt work (TargetName property cannot be set on a Style Setter)
..
How can I do this?
As error states you cannot use TargetName in style setters.
As a workaround what you can do is, instead of using StaticResource for your brush, bind it using DynamicResource so that we can take advantage of resource look up behaviour of XAML.
<Rectangle x:Name="TabPanelBorderRectangle"
Fill="{DynamicResource TabPanelBorderBrush}"/>
Now, in your style you can override that brush by specifying the same key for a brush and provide your color value there.
<Style TargetType="{x:Type local:MetroTabControl}"
BasedOn="{StaticResource {x:Type local:MetroTabControl}}">
<Style.Resources>
<SolidColorBrush x:Key="TabPanelBorderBrush" Color="Green"/>
</Style.Resources>
</Style>
Since the brush is binded via dynamic resource it will pick the most local value from your style resource which will be Green in above case.

WPF ListView Highlight Color don't change

I have a ListView with three TextBlock for each Item.
The first one has the default color (black) and the others has the property Foreground set to gray.
When I select an item the color of the first TextBlock becomes blue but the others stay gray and are hard to read.
I want that all the text become white color when the item is selected.
How I do that ?
Edit :
My style :
<UserControl.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
My ListView
<ListView x:Name="lvResultat" Grid.Row="0" Grid.Column="1" Background="{x:Null}"
Margin="4"
HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding ResultatsRecherche}" SelectedItem="{Binding ResultatSelectione, Mode=TwoWay}" BorderBrush="{x:Null}" MouseDoubleClick="lvResultat_MouseLeftDoubleClick" >
<ListView.ItemTemplate>
<DataTemplate DataType="viewModel:ResultatRechercheViewModel">
<Grid Height="86" Margin="2" >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Titre}"
FontSize="20" FontWeight="Bold" />
<TextBlock Text="{Binding SousTitre}" Grid.Row="1"
FontStyle="Italic" Foreground="Gray"/>
<TextBlock Text="{Binding Resume}" Grid.Row="2" TextTrimming="WordEllipsis"
Foreground="Gray"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I also tried things like
<Style TargetType="ListViewItem">
<Style.Resources>
<!--<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White" />-->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="White" />
</Style.Resources>
</Style>
EDIT 2 :
I have discovered that the custom style changes the color of Textblock which have the default property as Foreground (black).
If I specife Black for the color of the text of the first textblock, the text doesn't change anymore of color when the item is selected.
Picture :
You could achieve what you are trying to do by converting your code from having DataTemplate for a ListViewItem to having a ControlTemplate
This is what I tried:
ListViewItem Style:
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="4">
<Grid Height="86" Margin="2" >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Titre}"
FontSize="20" FontWeight="Bold" />
<TextBlock Text="{Binding SousTitre}" Grid.Row="1" Name="st"
FontStyle="Italic" Foreground="Gray"/>
<TextBlock Text="{Binding Resume}" Grid.Row="2" TextTrimming="WordEllipsis" Name="r"
Foreground="Gray"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" TargetName="st" Value="White" />
<Setter Property="Foreground" TargetName="r" Value="White" />
<Setter Property="Background" TargetName="ContentBorder" Value="DeepSkyBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and then I removed DataTemplate from the ListView XAML:
<ListView x:Name="lvResultat" Grid.Row="0" Grid.Column="1" Background="{x:Null}"
Margin="4"
HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding ResultatsRecherche}" SelectedItem="{Binding ResultatSelectione, Mode=TwoWay}" BorderBrush="{x:Null}" >
</ListView>
However, if you must use DateTemplate, then what you could do is have a property called IsSelected on your ViewModel, ResultatRechercheViewModel and then have DataTriggers on that property in your DataTemplate.
Updated DataTemplate:
<ListView.ItemTemplate>
<DataTemplate DataType="viewModel:ResultatRechercheViewModel">
<Grid Height="86" Margin="2" >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Titre}"
FontSize="20" FontWeight="Bold" />
<TextBlock Text="{Binding SousTitre}" Grid.Row="1" Name="st"
FontStyle="Italic" Foreground="Gray"/>
<TextBlock Text="{Binding Resume}" Grid.Row="2" TextTrimming="WordEllipsis" Name="r"
Foreground="Gray"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Foreground" TargetName="st" Value="White" />
<Setter Property="Foreground" TargetName="r" Value="White" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
And, you need to update your ViewModel code to set IsSelected property, Below is code from my MainViewModel:
public ResultatRechercheViewModel ResultatSelectione
{
get { return _resultatSelectione; }
set
{
if (_resultatSelectione != null)
{
_resultatSelectione.IsSelected = false;
}
_resultatSelectione = value;
_resultatSelectione.IsSelected = true;
}
}
Hope this resolves your problem or gives you some ideas to resolve your problem.
Try this syntax
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>
Foreground Try use style for listView items:
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>

Button after ListBox

I need to show ListBox with dynamic content (so I do not know its height) and Button below it. So user should be able to scroll ListBox to end and see button.
In Android I would use RelativeLayout and below property for button or some other solution, but in WP I do not know how to do it.
What I had tryed:
1) Put all in StackPanel
<StackPanel>
<ListBox />
<Button />
</StackPanel>
This is not working, because StackPanel is blocking ListBox scrolling.
2) Ok, lets put ListBox in Grid
<StackPanel>
<Grid>
<ListBox />
</Grid>
<Button />
</StackPanel>
Nothing happens.
3) Put all in Grid and use Grid.Row not worked.
4) Lets put all in Grid and set margin for Button dynamically
<Grid>
<ListBox />
<Button />
</Grid>
Ok, this is working, but it is not good solution , because I need to handle ListBoxpopulating each time and reset margin for button. Bad bad bad.
P.S. Also, I can put button as ListBox item (not bad, but not good :)
Help me please...
If I understood you correctly, you need a simple Grid defined like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox />
<Button Grid.Row="1" Height="80"/>
</Grid>
By making height of the row zero to "star" and the first row to Auto, the ListBox will fill the remaining space, and the Button only 80 (you can change this to whatever you like). ListBox is automatically put to row zero because that's the default if it is not explicitly set.
If you don't want the button fixed on the page but to scroll with the ListBox, you could edit the ListBox template like this:
<Style x:Key="ListBoxWithButtonStyle" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ItemsPresenter/>
<Button Content="Touch me" Height="80" Grid.Row="1"/>
</Grid>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then apply to ListBox:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Style="{StaticResource ListBoxWithButtonStyle}">
</ListBox>
</Grid>

How can we display grouped radio buttons horizontally in WPF?

How can we display Vertical radio button in horizontally manner in WPF
I am working on a WPF project and I am using this code to create a list box radio group which is bind with my Data Srouce.
I have used below code to create a listbox with radio button and bind it with my datasource
Code :
`<Window.Resources>
<Style x:Key="radioListBox" TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5" />
<Setter Property="DisplayMemberPath" Value="Text" />
<Setter Property="SelectedValuePath" Value="Value" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="Transparent">
<RadioButton Focusable="False" Margin="5,5,5,5" IsHitTestVisible="False" IsChecked="{TemplateBinding IsSelected}">
<ContentPresenter />
</RadioButton>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DockPanel>
<!-- StatusBar just to make sure two-way binding is working properly -->
<StatusBar DockPanel.Dock="Bottom" BorderBrush="Black" BorderThickness="0,1,0,0">
<TextBlock Text="{Binding CurrentChild.Details}" TextWrapping="Wrap" />
</StatusBar>
<!-- Details pane -->
<Border Margin="5" BorderBrush="LightGray" BorderThickness="1">
<Grid>
<Grid.Resources>
<!-- Common style for header labels -->
<Style TargetType="Label">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="5,2" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="104" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="27" />
<RowDefinition Height="Auto" MinHeight="27" />
</Grid.RowDefinitions>
<Label Grid.Row="3" Content="My Sample Numbers:" />
<ListBox Grid.Row="3" Grid.Column="1" Style="{StaticResource radioListBox}"
ItemsSource="{Binding MyNumberTypes}" Height="Auto" Margin="5,4,5,0" VerticalAlignment="Top" />
</Grid>
</Border>
</DockPanel>`
public IEnumerable<ValueAndText<NumType>> MyNumberTypes
{
get
{
yield return new ValueAndText<NumType>(NumType.One, "One");
yield return new ValueAndText<NumType>(NumType.Two, "Two");
yield return new ValueAndText<NumType>(NumType.Three, "Three");
yield return new ValueAndText<NumType>(NumType.Four, "Four");
yield return new ValueAndText<NumType>(NumType.Five, "Five");
yield return new ValueAndText<NumType>(NumType.Six, "Six");
yield return new ValueAndText<NumType>(NumType.Seven, "Seven");
yield return new ValueAndText<NumType>(NumType.Eight, "Eight");
yield return new ValueAndText<NumType>(NumType.Nine, "Nine");
}
}`
Every thing is working fine but the problem is I need all radio button to display in zig zag style. Since my form does not have much space to accommodate the radio buttons vertically so is there any way I can display these radio button in a way it can be displayed horizontally?
for example (cant post image)
One Two Three
Four Five Six
Seven Eight Nine
You can style your ItemsPanel in your Listbox Style. Add to radioListBox style:
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="3" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
to display radiobuttons in a grid of 3 columns. Using ItemsPanel you can change the container in which yours items are displayed.

Resources