I am trying to get images in a Listbox to display in a certain way.
Listbox now:
How i want:
As you can see i want the scroll bar to be down the side and there to be multiple columns and rows depending on the size of the listbox.
Define WrapPanel as ListBox's ItemsPanel:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel ></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
Don't forget to set Width or MaxWidth to the wrap panel. Once max width is reached it will start placing content on new line...
use WrapPanel with Width set to a value. for an example run below code:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525" >
<Window.DataContext>
<local:ParentViewModel />
</Window.DataContext>
<ListBox Height="auto" ItemsSource="{Binding MyList,Mode=TwoWay}">
<ListBox.Style>
<Style TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate" >
<Setter.Value>
<DataTemplate>
<Button Content="{Binding}" Padding="15,5" Margin="100,40,0,0"
Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBox}},Path=DataContext.RemoveButtonCommand}"
CommandParameter="{Binding}"
/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Style>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}},Path=ActualWidth}"
>
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
You will get both vertical and horizontal scrollbars. both adjusting according to height and width of window with the elements in listbox. (please bind your own listbox source)
Related
I am trying to fit an exact amount of list items in the viewbox of my window so I retrieve the width of the corresponding ListBox and divide it by the amount I need (in this case 7) like this:
Width="{Binding Path=ActualWidth, ElementName=WeekView, Converter={StaticResource DivideBySeven}}"
The width of my window is 800 and I checked inside the converter what values it gets (784 for the ListBox what seems reasonable) and what value it returns (112, if my math is correct this is also correct).
Problem is my app looks like this:
I thought ok maybe some calculation got wrong and manually set the item width to 100 (so 700 with all) and I got this:
And on the right side there are not 84 (whatever unit is used) of space.
EDIT: If I resize the window to fullscreen the calculation seems to be correct but I also don't know why or what is going wrong.
Any ideas what I made wrong or how I can get the behaviour I want?
EDIT2:
This is the code to reproduce the issue:
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="800">
<Grid>
<ListBox HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
</ListBox>
</Grid>
</Window>
You have a couple different problems:
Don't rely on the Window for calculating precise Width and Height for your content. The Window has invisible OS-level elements that factor into its total size.
Solution: Remove the Height and Width from your Window and use SizeToContent="WidthAndHeight" instead. Set your precise Width and Height in your root layout element.
There are hidden Padding, Margin, and BorderThickness values in many controls.
Solution: I highly recommend that you use Snoop for WPF or the built-in Visual Studio tools to look at elements at runtime and see what they are using. You can then override these values (in most cases) via styles, etc.
Here is an edited version of your example that works:
<Window x:Class="WpfApp3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
SizeToContent="WidthAndHeight">
<Grid
Width="800"
Height="350">
<ListBox
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style BasedOn="{StaticResource {x:Type ListBoxItem}}" TargetType="ListBoxItem">
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</ListBox.ItemContainerStyle>
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
<StackPanel Width="112" />
</ListBox>
</Grid>
</Window>
Have you tired this code?
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="800">
<Grid>
<ListBox HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<StackPanel Width="*" />
<StackPanel Width="*" />
<StackPanel Width="*" />
<StackPanel Width="*" />
<StackPanel Width="*" />
<StackPanel Width="*" />
<StackPanel Width="*" />
</ListBox>
</Grid>
I'm trying to use a ScrollViewer to be able to scroll the items in an ItemsControl but for some reason, it's not working. The scroll view shows but it is disabled.
<UserControl x:Class="Tool.Views.ShortcutsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignWidth="500"
mc:Ignorable="d" Height="541">
<UserControl.Resources>
<Style x:Key="GlobalShortcutButtonTemplate" TargetType="{x:Type Button}">
<!-- Style code -->
</Style>
</UserControl.Resources>
<Grid Margin="10,40,10,0" Background="White" Height="108" VerticalAlignment="Top">
<ScrollViewer CanContentScroll="True">
<ItemsControl
ItemsSource="{Binding ShortcutsObservableCollection}"
Height="108" VerticalAlignment="Top" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="10"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Height="35"
Content="{Binding ShortcutName}"
Command="{Binding ShortcutCommand}"
CommandParameter="{Binding FilePath}"
Margin="10 0 0 10"
Background="#FF30CCFF"
Foreground="White"
Padding="10,0"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</UserControl>
This is what I see...
There are plenty of items in the ItemsControl for the scroller to show and be able to scroll the items in it, the rest of the items are hidden.
Any idea what can I do to make the scroller to show up properly?
Just remove Height="108" from your ItemsControl. You can't scroll because there is nothing to scroll.
I'm trying to group my ObservableCollection using CollectionViewSource, it seems to work for items but it's not showing the bind property value for GroupBox.
Here is what I'm trying:
I've List<Object> containing properties Description, Season. I want to group by Season. Here is my xml:
<mah:MetroWindow x:Class="eCatalog_Launcher.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:eCatalog_Launcher"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
mc:Ignorable="d"
Title="eCatalog Launcher"
WindowState="Maximized"
Loaded="MetroWindow_Loaded"
Closing="MetroWindow_Closing">
<Window.Resources>
<CollectionViewSource x:Key="catalogsBySeasons"
Source="{Binding Path=Catalogs, Mode=TwoWay}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="Season" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Source={StaticResource catalogsBySeasons}}">
<ItemsControl.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<GroupBox Header="{Binding Season}">
<ItemsPresenter />
</GroupBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ItemsControl.GroupStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<mah:Tile Title="{Binding Description}"
Tag="{Binding}"
Style="{StaticResource SmallTileStyle}"
Click="Tile_Click">
<iconPacks:PackIconMaterial Width="32"
Height="32"
Margin="0, -30, 0, 0"
Kind="{Binding Kind}">
</iconPacks:PackIconMaterial>
</mah:Tile>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
It's showing the Season value as GroupBox Heading.
Is there anything wrong?
You should bind to the Name property of the group:
<ControlTemplate TargetType="{x:Type GroupItem}">
<GroupBox Header="{Binding Name}">
<ItemsPresenter />
</GroupBox>
</ControlTemplate>
This should display the actual value of the Season property that you group by.
Hello Stackoverflowers,
I'm using an ItemsControl and my elements are all drawn on the top left corner, which create to a gap between the actual position and the mouse position (where my elements should be). Relevant mouse positions are saved in view model.
<ItemsControl
ItemsSource="{Binding OverlayElementsList}"
Background="Transparent"
BorderBrush="Black"
BorderThickness="2">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding ElementName=X, Path=Client.OverlayElement.StartPoint}" />
<Setter Property="Canvas.Top" Value="{Binding ElementName=Y, Path=Client.OverlayElement.StartPoint}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type elements:OverlayElement}">
<ContentControl Content="{Binding View}" />
</DataTemplate>
</ItemsControl.Resources>
Here is one of the possible View binded in the ItemsControl.Resources :
<UserControl x:Class="Client.ImageOverlayElementView"
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"
xmlns:local="clr-namespace:Genetec.CS.OverlayModule.Client"
mc:Ignorable="d"
d:DataContext="{d:DesignInstance local:ImageOverlayElement}">
<Grid>
<Image
Source="{Binding ImageSource}"
Height="{Binding Height}"
Width="{Binding Width}"
Canvas.Left="{Binding StartPoint}"
Canvas.Top="{Binding EndPoint}"/>
</Grid>
</UserControl>
The Canvas.Left and Canvas.Top properties seem to be simply ignored, why ?
I have designed my form like this ini WPF:
So how to make highlight background of Halaman12b in each column with different color when I have focused keyboard in one of my textbox in Halaman12?
I used my user control of Hal 12 like this:
<UserControl x:Class="Susenas2015.Content.KOR.Halaman12"
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"
xmlns:kor="clr-namespace:Susenas2015.Content.KOR"
mc:Ignorable="d"
d:DesignHeight="1200" d:DesignWidth="1500">
<ScrollViewer HorizontalScrollBarVisibility="Auto" >
<StackPanel Orientation="Horizontal">
<kor:Halaman12a Width="300"></kor:Halaman12a>
<ItemsControl ItemsSource="{Binding ListART5_1}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<kor:Halaman12b DataContext="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
So what I want like highlighting particular column when I get focus in one of my TextBox in Halaman12?
Thanks
Assuming that kor:Halaman12b is UserControl which does not set Background to local value you can change background of control depending on IsKeyboardFocusWithin
<kor:Halaman12b DataContext="{Binding}">
<kor:Halaman12b.Style>
<Style TargetType="{x:Type kor:Halaman12b}">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</kor:Halaman12b.Style>
</kor:Halaman12b>