Showing a collection of items inside of a ItemsControl horizontally - wpf

Here is the XAML markup:
<ScrollViewer Grid.Column="1" Grid.Row="2" HorizontalScrollBarVisibility="Disabled" Width="990">
<StackPanel Margin="50 0 0 40">
<ItemsControl x:Name="streamList" ItemsSource="{Binding StreamInformations}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" Orientation="Horizontal" >
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageUrl}" Height="60" />
<StackPanel Margin="10 0 0 0" VerticalAlignment="Center">
<TextBlock Foreground="Black" Text="{Binding ChannelName}" FontSize="12" />
<TextBlock Foreground="#999" Text="{Binding PlayerName}" FontSize="10" />
<TextBlock Foreground="#999" Text="{Binding ViewCount}" FontSize="10" />
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
And this is how it looks:
I'd like these items to appear horizontally and flow down when it reaches the edge of the StackPanel.
It seems that currently, each item in my DataContext collection is creating it's own StackPanel, so this isn't what I want.
Any suggestions?

If you change the ItemsPanel template to either a WrapPanel or horizontal StackPanel, you can achieve the effect you are after...
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<!--other stuff here-->
</ItemsControl.ItemTemplate>
</ItemsControl>
In this snippet, the ItemsPanel is set to a WrapPanel oriented horizontally. The ItemTemplate would include the binding and styling you already have...

Related

Synchronize the size of controls that lay in different ItemsCollections

I want to synchronize the width of two controls.
<!--DataContext-->
<DockPanel LastChildFill="True" x:Name="HeaderDockPanel">
<DockPanel LastChildFill="True" MinHeight="60" DockPanel.Dock="Top" DataContext="{Binding Month}" d:DataContext="{d:DesignInstance Type=local:Month}" >
<TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlock}" DockPanel.Dock="Left" />
<!--this shoud to set the Width-->
<!--Nested_1 DataContext Model_1-->
<local:DaysLine HorizontalAlignment="Left" Width="{Binding ElementName=HeaderDockPanel, Path=DataContext.DaysHeaderWidth, Mode=TwoWay}" />
</DockPanel>
<!--Nested_1 DataContext Model_2-->
<ListView Grid.Row="1" ItemsSource="{Binding CarBusiness}">
<ItemsControl.ItemTemplate>
<DataTemplate >
<DockPanel d:DataContext="{d:DesignInstance Type=local:CarBusiness}" LastChildFill="True">
<TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlock}" DockPanel.Dock="Left" Margin="-6 0 0 0"/>
<!--this shoud to get the Width-->
<!--Nested_2 DataContext Model_3-->
<ItemsControl ItemsSource="{Binding Business}" Style="{StaticResource HorizontalItemsControl}" Width="{Binding DaysHeaderWidth}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:BusinessTextBlock d:DataContext="{d:DesignInstance Type=local:Business}" Business="{Binding}" ColumnWidth="20" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</DockPanel>
The problem is that i can't find the source by RelativeSource Binding use FindByName.
The target control whatch on nested DataContext that is an item of the first and i cant set it in without adding to all this models the MyWidth property.
Is there a some enother way to bind them more correct?
I am thinking about a static property but it is not as correct as i want because i have planned to have a several instances of this control.

StackPanels going side by side

I have this small stackpanel that gathers information from a class I have. I want the stack panels to go side by side instead of just stacking up on top of each other. This is the code I have
<SplitView.Content>
<Grid>
<ListView x:Name ="View">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel>
<TextBlock Text="{Binding title}"></TextBlock>
<TextBlock Text="{Binding location}"></TextBlock>
<TextBlock Text="{Binding date}"></TextBlock>
<TextBlock Text="{Binding desc}"></TextBlock>
<Button HorizontalAlignment="Right" FontFamily="Segoe MDL2 Assets" Content=""></Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Content>
I don't want them to go infinitly to the side though, just like 2 next to each other and then another 2 bellow, if that is possible
You can set ListView.ItemsPanel to a StackPanel with Horizontal Orientation.
<ListView x:Name ="View">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>

Cannot associate CarouselNavigator with CarouselPanel when CarouselPanel is a child element within CarouselItemsControl ItemsPanelTemplate

i have xaml layout as shown below
<DockPanel Grid.Row="1" Grid.ColumnSpan="2">
<dxca:CarouselItemsControl x:Name="carouselItemsControl" ItemsSource="{Binding ImageList}" DockPanel.Dock="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<dxca:CarouselPanel x:Name="carousel" AttractorPointIndex="2" IsRepeat="True" PathSizingMode="Proportional" FirstVisibleItemIndex="0" Height="Auto" ItemSize="180,120" IsAutoSizeItem="True" VisibleItemCount="5" ActiveItemIndex="1" AnimationTime="500" IsInvertedDirection="True" PathVisible="False">
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Image Source="{Binding Data.Data}" Width="480" Height="320" Margin="10"/>
<TextBlock Canvas.Left="100" Canvas.Top="10" Text="{Binding Identifier}" FontSize="12" FontWeight="Bold"></TextBlock>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</dxca:CarouselItemsControl>
<dxca:CarouselNavigator DockPanel.Dock="Bottom" Carousel="< TODO : BINDING EXPRESSION TO BIND TO CarouselPanel>" Width="300" Height="40" />
</DockPanel>
How do i bind the CarouselNavigator to the carousel object in the carousel property using xaml only?
Just use the CarouselItemsControl.Carousel property for this purpose:
<dxca:CarouselNavigator Carousel="{Binding Path=Carousel, ElementName=carouselItemsControl}" />

Horizontal stackpanel to wrap DataBinded ItemsControl

I have an ItemsControl for which the ItemsSource is Binded. i coded it as per the below so that it would add the UserControl (showing the different items) to a StackPanel with a horizontal orientation that then contains a wrappanel to wrap the items inside but it is not working. All of the items are showing but they are all on one line and do not wrap to a new line when needed.
How can this code be fixed to include wrapping?
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto"
Grid.Column="0" Grid.Row="1">
<ItemsControl x:Name="tStack"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1"
ItemsSource="{Binding Items.View}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel x:Name="stckPnl" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<WrapPanel>
<Viewbox HorizontalAlignment="Left" Height="400">
<Controls1:MyItemsUserControl Padding="5"/>
</Viewbox>
</WrapPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I have solved this issue by setting Width for WrapPanel. In below snippet i have binded WrapPanel width to its Parent Grid control named MainGrid and Path to its ActualWidth. Please see below snippet will helps you sometimes to solve your issue
<ItemsControl Name="ThemesItemControl"
Grid.Column="1"
Grid.Row="1"
ItemsSource="{Binding InstalledCollection}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0.5">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
VerticalAlignment="Top"
Width="{Binding ElementName=MainGrid, Path=ActualWidth}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button Width="210"
Height="260"
Margin="20"
Tag="{Binding ID}"
Command="{Binding DataContext.ThemeSelectCommand,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window}}}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}}">
<StackPanel>
<Image Source="{Binding TileImage}"/>
</StackPanel>
</Button>
<TextBlock Text="{Binding Title}"
FontWeight="ExtraBold"
HorizontalAlignment="Center"
FontSize="15"
FontFamily="Segoe Print"
Foreground="Red"/>
<TextBlock Text="{Binding Description}"
HorizontalAlignment="Center"
FontSize="13"
FontFamily="Segoe Print"
Foreground="Red"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Why does WrapPanel wrap TextBlocks horizontally but UserControls vertically?

This correctly wraps the TextBlocks horizontally:
<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
<WrapPanel Orientation="Horizontal">
<TextBlock Text="one"/>
<TextBlock Text="two"/>
<TextBlock Text="thee"/>
<TextBlock Text="four"/>
</WrapPanel>
</StackPanel>
But this incorrectly wraps my UserControls vertically stacked on top of each other (I want them to be horizontally wrapped like the TextBlocks above):
<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
<WrapPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:CustomerSimpleItemView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</WrapPanel>
</StackPanel>
CustomerSimpleItemView:
<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="100"/>
</UserControl>
What do I have to do in my UserControl so that they wrap horizontally?
added: even if I change all widths and heights in the usercontrol to Auto, it still stacks vertically...:
<UserControl x:Class="TestMvvmExample2341.Views.CustomerSimpleItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="Auto" Height="Auto">
<TextBlock Text="{Binding LastName}" FontWeight="Bold" Width="Auto" Height="Auto"/>
</UserControl>
In your second sample, try to use the WrapPanel inside a ItemsPanelTemplate for the ItemsControl, otherwise the ItemsControl uses a StackPanel by default and your WrapPanel doesn't do anything as there is nothing to wrap.
<StackPanel DockPanel.Dock="Top" Margin="10" HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:" Margin="0 0 0 5"/>
<ItemsControl ItemsSource="{Binding CustomerViewModels}" Width="Auto" BorderThickness="0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:CustomerSimpleItemView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
This is happening because the ItemsControl, by default uses a StackPanel in vertical orientation to layout it child objects. So the wrap panel is actually only laying out one child which is the ItemsControl. What you wan't to do is set the ItemsControl's ItemsPanel property so that is uses a WrapPanel for layout. Your code would look like this:
<StackPanel DockPanel.Dock="Top"
Margin="10"
HorizontalAlignment="Left">
<TextBlock Text="Simple WrapPanel:"
Margin="0 0 0 5" />
<!-- Note I am removing the WrapPanel that was surrounding the ItemsControl -->
<ItemsControl ItemsSource="{Binding CustomerViewModels}"
Width="Auto"
BorderThickness="0">
<!-- This is the important part. Here we set the ItemsPanel template -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:CustomerSimpleItemView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>

Resources