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>
Related
I have a grid that contains dynamically created buttons.
I have a selector tool that will select a "rectangle" of buttons and do whatever on them.
I'm stuck at this point, because I'm going down the MVVM route.. but I previously had a list of all the buttons and would do:
var buttonPos = button.TransformToAncestor(someGrid).Transform(new Point(0, 0));
Now I do not have the luxury of being able to get all the buttons in my itemscontrol to do that (or at least I don't know how).
This is a section of my XAML.
<Grid Name="mainGrid" DockPanel.Dock="Left" MouseDown="MainGrid_MouseDown" MouseUp="MainGrid_MouseUp" MouseMove="MainGrid_MouseMove" Background="Transparent"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MinWidth="{Binding GridWidth}" Height="{Binding GridHeight}">
<ItemsControl x:Name="ObjItemControl" ItemsSource="{Binding ObjCompositeCollection}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Row}"/>
<Setter Property="Grid.Column" Value="{Binding Column}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Name="objGrid" Grid.Row="1"
Width="{Binding MinWidth, ElementName=mainGrid}"
Height="{Binding Height, ElementName=mainGrid}"
engine:GridHelper.RowCount="{Binding RowCount}"
engine:GridHelper.ColumnCount="{Binding ColumnCount}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type engine:ObjA}">
<ToggleButton Content="{Binding Id}"
Tag="{Binding Id}"
IsChecked="{Binding IsSelected}"
Height="{Binding ElementName=ObjItemControl,
Path=DataContext.ButtonHeightWidth}"
Width="{Binding ElementName=ObjItemControl,
Path=DataContext.ButtonHeightWidth}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="{Binding ElementName=wellPlateItemControl,
Path=DataContext.ButtonMarginToUse}"
Padding="2"
PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown"
PreviewMouseLeftButtonUp="Button_PreviewMouseLeftButtonUp"
MouseEnter="Button_MouseEnter"
MouseLeave="Button_MouseLeave"
Style="{StaticResource ObjButton}">
</ToggleButton>
</DataTemplate>
<DataTemplate DataType="{x:Type engine:GridLabeller}">
<TextBlock Text="{Binding HeaderName}" Style="{StaticResource GridHeaders}"/>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
<ItemsControl ItemsSource="{Binding RectForMarquee}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="{Binding Width}" Height="{Binding Height}"
Visibility="{Binding Visibility}"
Stroke="{StaticResource ResourceKey=SecondaryThemeColour}"
StrokeThickness="2" StrokeDashArray="2,1"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!--<Canvas>
<Rectangle x:Name="selectionBox" Visibility="Collapsed" Stroke="{StaticResource ResourceKey=SecondaryThemeColour}" StrokeThickness="2" StrokeDashArray="2,1"/>
</Canvas>-->
</Grid>
I want to be able to get all of the ObjA toggle buttons and do that TransformToAncestor check... unless there is a better way?
I can also do this in the View code-behind but not sure if this is a bit naughty...
private void MainGrid_MouseUp(object sender, MouseButtonEventArgs e)
{
// Need to find a better way for this...
List<UIElement> tgInItemControl = new List<UIElement>();
foreach (var toggleButton in VisualHelperExtensions.FindVisualChildren<ToggleButton>(ObjItemControl))
{
tgInItemControl.Add(toggleButton);
}
viewModel.MainGrid_MouseUp(tgInItemControl, e);
}
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.
I have a ListBox which displays its items in a WrapPanel. The ListBox itself is embeddded in Border. But the more items I put into the ListBox, the larger window gets. How can I prevent that and display the vertical scrollbar instead?
I found several other posts but nothing worked so far.
<Border Background="WhiteSmoke" BorderBrush="Gray" BorderThickness="4" Margin="5">
<ListBox Background="Transparent" BorderThickness="0" Height="Auto"
ItemsSource="{Binding Path=Snapshots, RelativeSource={RelativeSource AncestorType=Demo:CameraCanvas}}"
SelectedItem="{Binding Path=Snapshots.SelectedSnapshot, RelativeSource={RelativeSource AncestorType=Demo:CameraCanvas}}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
>
<ListBox.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>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border CornerRadius="5" Background="WhiteSmoke" BorderBrush="Gray" BorderThickness="2" Margin="5" Padding="2">
<StackPanel Orientation="Vertical">
<Image Source="{Binding Path=Image, UpdateSourceTrigger=PropertyChanged}" Width="64" Height="64" Stretch="Uniform" StretchDirection="Both" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
Put the ListBox in a DockPanel, the dockpanel should be constrainted in size.
read the following msdn topic Panels Overview
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>
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.