Develop Reference

WrapPanel doesnt wrap horizontal with DataTemplate

I'm filling a two WrapPanel with Buttons via DataTemplate but they all align vertically for some reason, what exactly is wrong here?
It doesn't matter if I set the Orientation property or not.
XAML:
<UserControl x:Class="DashboardClient.View.DashboardView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Width="940" Height="640">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}},Path=ActualHeight}">
<ScrollViewer VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top" Height="520" Margin="5">
<WrapPanel>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="120" Height="120" Margin="5" Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Width="120" Height="120" Margin="5" Command="{Binding DashboardAddCommand}" Content="+" FontSize="100" />
</WrapPanel>
</ScrollViewer>
<StackPanel Height="100" Margin="5">
<Label>Dashboardname:</Label>
<TextBox Text="{Binding SelectedDashboard.Name}" />
<RadioButton Content="Sichtbar" Margin="0 10" IsChecked="{Binding SelectedDashboard.IsVisibleOnDashboard, UpdateSourceTrigger=PropertyChanged}" />
<Button Content="Dashboard löschen" Command="{Binding DashboardRemoveCommand}" />
</StackPanel>
</DockPanel>
<StackPanel Grid.Column="1" Margin="0">
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}},Path=ActualHeight}">
<WrapPanel>
<ItemsControl ItemsSource="{Binding SelectedDashboard.DashboardItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="200" Height="120" Command="{Binding DataContext.DashboardItemCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}" Margin="10">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Width="200" Height="120" Content="+" FontSize="100" Command="{Binding DashboardItemAddCommand}" Margin="10" />
</WrapPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</UserControl>
This is what the WrapPanel looks like:
The Add Button is always cut off somehow, too.

If you want to put the children of the ItemsControl horizontally in a WrapPanel, you need to tell the ItemsControl to use a WrapPanel for its children via an ItemsPanelTemplate:
<WrapPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Width="120"
Height="120"
Margin="5"
Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding}"
>
<TextBlock
TextWrapping="Wrap"
HorizontalAlignment="Center"
Text="{Binding Name}"
/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button
Width="120"
Height="120"
Margin="5"
VerticalAlignment="Top"
Command="{Binding DashboardAddCommand}"
Content="+"
FontSize="100"
/>
</WrapPanel>
I don't know what you want to do with the button. My guess is that you want it to the right of the ItemsControl, and I aligned it to the top because that makes more sense to me.

Instead of
<ScrollViewer>
<WrapPanel>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate ... />
</ItemsControl>
<Button Content="+" ... />
</WrapPanel>
</ScrollViewer>
You can use
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate ... />
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button Content="+" ... /> <!-- A -->
</ScrollViewer>
<Button Content="+" ... /> <!-- B -->
WrapPanel is moved inside ItemsControl to layout dashboards.
You can put button somewhere else (same as #EdPlunkett I don't have a good idea where to put it): A - will let you to scroll button together with dashboards and B will keep button fixed, disregards scrolling.

How to make a grid column scroll horizontally in metro apps?

I have a Grid column and I have a list view in it. I am populating it from a form which is found in a another column. The values entered in the form gets saved to a list. I want that list displayed in the list view. When the text entered in the form increases the remaining values gets disappeared. I want that column to scroll horizontally so the values don't get disappeared.
This is what I have tried so far..
<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden" Margin="0,0,-60,10">
<ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="-12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
<StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
<TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>
Someone please help me do this.
Any kind of help is appreciated....

Have you tried to do that w/o the ScrollViewer Control? and Enable the horizontal scroll mode?
Try this:
<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0" ScrollViewer.HorizontalScrollMode="Enabled" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="-12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
<StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
<TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Adding ScrollViewer.HorizontalScrollMode="Enabled" & Removing the ScrollViewer control ..
UPDATE:
You can achieve that without using columns.. here's my try:
<Grid x:Name="rootGrid">
<ScrollViewer HorizontalScrollMode="Enabled" >
<StackPanel Orientation="Horizontal" >
<Grid x:Name="form" >
<!-- your form here.. -->
</Grid>
<Grid x:Name="list" >
<!-- your listview here.. -->
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
Good luck :)

How do I stop overflow on ListView on one line

I would like to create a listview, which contains some items.
Each items have a specific size (same for all) and are clickable.
I've created the listview, but once I have reach the max width size of the listview, it wraps and goes on a second line. I would like to have a horizontal Scroll Bar and all my items on one line.
For exemple, I have 5 items, but it displays that :
I would like to have the horizontal scrollbar to be able to see the fifth.
Here is my xaml code :
<ListView Background="#1A1A1A" HorizontalAlignment="Stretch" Margin="10,0,10,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" Height="100" ItemsSource="{Binding Projects}" SelectionChanged="ListView_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" 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>
<Border BorderBrush="#CCCCCC" BorderThickness="1">
<StackPanel Orientation="Horizontal" Height="100" Width="200">
<TextBlock Height="100" Width="200" FontSize="20" Padding="0,25,0,0" TextAlignment="Center" Foreground="#1A1A1A" Background="{Binding BackgroundColor}" Text="{Binding Title}" />
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

you can change wrap panel to stackPanel
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" 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>
to
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}" />
</ItemsPanelTemplate>

Combobox selected item background at top not popup

I am looking for a way to set image background there.. Because it is white on a gray background.. Selected item trigger doesnt work because there is no parent ComboboxItem..
<ComboBox.Resources>
<DataTemplate x:Key="DataTemplate1">
<Border x:Name="border" Padding="10">
<Image Source="{Binding }" Stretch="None"/>
</Border>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<WrapPanel Width="{Binding ActualWidth , RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ComboBox }}}" Background="{StaticResource ListItemSelected}" Orientation="Horizontal" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ComboBox.Resources>

howto: Column drag/Move functionality in itemscontrol similar to DataGrid in Silverlight

e have a requirement to show vertical profiles of Data related to an entity, the profiles can change dynamically, so basically its a dynamic column grid, just that its not a Grid control, instead i have acheived this using ItemsControl and Listboxes.
Now i need to implement something similar to how the Grid behaves in column moving, i have to be able to move the Profile 6 next to Profile 1 to compare.
How can i achieve this ?
Below is my Xaml that renders the screen as shown below the code.
Header buttons are toggle buttons, so clicking on it selects the whole profile.
Updated Code with Drag and Drop
<ScrollViewer Height="500" Name="scrollViewer1" Width="Auto" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Margin="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<toolkit:DockPanel>
<!-- Items control container to hold time Bucket information -->
<ItemsControl x:Name="TimeBucket" Grid.Column="0" toolkit:DockPanel.Dock="Left" VerticalAlignment="Top">
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ToggleButton Grid.Row="0" Content="Bucket" Width="Auto" HorizontalAlignment="Stretch" IsEnabled="False"/>
<ListBox Grid.Row="1" Width="Auto" ItemsSource="{Binding Source={StaticResource DC1}, Path=Content.TimeBuckets, Mode=TwoWay}"
IsEnabled="False">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding}" Style="{StaticResource BucketProfileStyle}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Stretch">
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</Grid>
</ItemsControl>
<!-- Items Control for dynamic profile columns creation -->
<toolkit:ListBoxDragDropTarget AllowDrop="True" AllowedSourceEffects="Move" toolkit:DockPanel.Dock="Left" BorderThickness="0" Padding="0" VerticalAlignment="Top">
<ListBox ItemsSource="{Binding Profiles}" VerticalAlignment="Top" toolkit:DockPanel.Dock="Left" BorderThickness="0" Padding="0" IsTabStop="True" TabNavigation="Cycle">
<!--<ItemsControl x:Name="Profile" ItemsSource="{Binding Profiles}" VerticalAlignment="Top" toolkit:DockPanel.Dock="Left" Drop="Profile_Drop" >-->
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Drop="StackPanel_Drop" Margin="0"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ToggleButton Grid.Row="0" x:Name="HeaderButton" Content="{Binding Name}" Tag="{Binding ID}"
Width="Auto" HorizontalAlignment="Stretch" ClickMode="Release">
<i:Interaction.Behaviors>
<b:ToggleButtonAsHeaderButtonItemClickBehavior Command="{Binding Source={StaticResource DC1}, Path=Content.HeaderButtonClickCommand}"/>
</i:Interaction.Behaviors>
<ig:ContextMenuService.Manager>
<!--If you use the Infragistics Commanding Framework, you should set the OpenMode property to None-->
<ig:ContextMenuManager ModifierKeys="None" OpenMode="RightClick">
<ig:ContextMenuManager.ContextMenu>
<ig:XamContextMenu HorizontalAlignment="Left" Name="xamContextMenu11" VerticalAlignment="Top">
<ig:XamMenuItem Header="Import" IsEnabled="{Binding Source={StaticResource DC1}, Path=Content.ImportMenuIsEnabled}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding Source={StaticResource DC1}, Path=Content.ImportMenuCommand}"
CommandParameter="IMPORT"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ig:XamMenuItem>
<ig:XamMenuItem Header="Export" IsEnabled="{Binding Source={StaticResource DC1}, Path=Content.ExportMenuIsEnabled}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding Source={StaticResource DC1}, Path=Content.ExportMenuCommand}"
CommandParameter="EXPORT"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ig:XamMenuItem>
<ig:XamMenuItem Header="Revert to Original" IsEnabled="{Binding Source={StaticResource DC1}, Path=Content.RevertMenuIsEnabled}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding Source={StaticResource DC1}, Path=Content.RevertMenuCommand}"
CommandParameter="REVERT"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ig:XamMenuItem>
<ig:XamMenuItem Header="Graph" IsEnabled="{Binding Source={StaticResource DC1}, Path=Content.GraphMenuIsEnabled}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding Source={StaticResource DC1}, Path=Content.GraphMenuCommand}"
CommandParameter="GRAPH"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ig:XamMenuItem>
</ig:XamContextMenu>
</ig:ContextMenuManager.ContextMenu>
</ig:ContextMenuManager>
</ig:ContextMenuService.Manager>
</ToggleButton>
<ListBox Grid.Row="1" Height="Auto" x:Name="listBox1" Width="Auto" HorizontalAlignment="Stretch"
ItemsSource="{Binding Path=Profile, Mode=TwoWay}" SelectionMode="Extended"
dp:ListBoxExtenders.AutoScrollToCurrentItem="True">
<ListBox.Style>
<Style TargetType="ListBox">
<Setter Property="Background" Value="{Binding Path=Status, Converter={StaticResource ProfileStatusIndicator}}"/>
</Style>
</ListBox.Style>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding}" Style="{StaticResource BucketProfileStyle}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Stretch">
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<!--</ItemsControl>-->
</ListBox>
</toolkit:ListBoxDragDropTarget>
</toolkit:DockPanel>
</ScrollViewer>

So using a dragdropTarget, i was able to achieve the required result, leaving the complete solution above just for clarity.
<toolkit:ListBoxDragDropTarget AllowDrop="True" AllowedSourceEffects="Move" toolkit:DockPanel.Dock="Left" BorderThickness="0" Padding="0" VerticalAlignment="Top">

Solved using drag drop targets, updated solution posted above if somebody wants it.