Develop Reference

WPF - ScrollViewer returns to start position

I have a table with cells, where values can be inserted. Table is generated dynamically, based on data. Table size is limited by the grid, where it is located. If data is too much, then appears a horizontal scroll bar.
This is implemented with ItemsControl in the ScrollViewer.
<ScrollViewer
VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Data}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border>
<ItemsControl ItemsSource="{Binding Value}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="SomeCellRowSize"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SomeCellRowSize"/>
</Grid.ColumnDefinitions>
<TextBox
Text="{Binding Value.TotalTime}"
HorizontalContentAlignment="Right" BorderThickness="0" Margin="1,1,0,0"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
The problem happens, when we scroll the table to the right and select some cell (TextBox). If we do this, then ScrollViewer will return to the most left position.

It's better to have an integrated ScrollViewer inside the ItemsPanel itself than wrapping a ScrollViewer around it. From my experience, you tend to have more issues. Update your Template to have the ScrollViewer instead.
<ItemsControl ItemsSource="{Binding Data}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border>
<ItemsControl ItemsSource="{Binding Value}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="SomeCellRowSize"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="SomeCellRowSize"/>
</Grid.ColumnDefinitions>
<TextBox
Text="{Binding Value.TotalTime}"
HorizontalContentAlignment="Right" BorderThickness="0" Margin="1,1,0,0"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Aligment of Items in nested ItemsControls

I have two ItemsControls nested within a single ItemsControl. Each are placed next to each other in Grid Columns with horizontally oriented StackPanel ItemsPanelTemplates so their contents are layer out horizontally.
While I want the two ItemsControls to occupy the full width of the parent, (50:50), I want the items within them to be right, and left aligned respectively... so they both are centred, something like (excuse my attempt at ASCII art):
| LH ItemsControl | RH ItemsControl |
| [][][][]|[][][] |
Here's my code so far, I have been tweaking the HorizontalAlignment attributes but if I get them to occupy the centre, then the two StackPanels don't fill the full width of the parent.
<ItemsControl ItemsSource="{Binding Things}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="0" ItemsSource="{Binding LeftThings}" HorizontalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="LightPink" HorizontalAlignment="Stretch" Height="37"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<ItemsControl Grid.Column="1" ItemsSource="{Binding RightThings}" HorizontalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="LightBlue" HorizontalAlignment="Stretch" Height="37"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Any ideas?
Rich

Setting the Background property on the ItemsControl rather than the StackPanel and setting Orientation to Left and Right respectively on the StackPanel gave me the effect I was after:
<ItemsControl ItemsSource="{Binding Things}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="0" ItemsSource="{Binding LeftThings}" HorizontalAlignment="Stretch" Background="LightPink">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Height="37"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<ItemsControl Grid.Column="1" ItemsSource="{Binding RightThings}" HorizontalAlignment="Stretch" Background="LightBlue">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="37"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

Use FlowDirection=RightToLeft on left stackpanel, and FlowDirection=LeftToRight in DataTemplate control. I made a sample. Below code can be used as is :
MainWindow.xaml
<Window x:Class="WpfItemsControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="407.895" Width="884.211">
<Grid>
<ItemsControl ItemsSource="{Binding Names}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ItemsControl ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}}" Grid.Column="0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Red" HorizontalAlignment="Stretch" FlowDirection="RightToLeft">
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Background="DarkGoldenrod" FontSize="25" FontWeight="Bold" Foreground="Gray" Text="{Binding}" FlowDirection="LeftToRight"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}}" Grid.Column="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Red" HorizontalAlignment="Stretch" FlowDirection="LeftToRight">
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Background="DarkGoldenrod" FontSize="25" FontWeight="Bold" Foreground="Gray" Text="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>
MainWindow.xaml.cs
namespace WpfItemsControl
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
try
{
InitializeComponent();
this.DataContext = new DataStore();
}
catch (Exception ex)
{
Debug.WriteLine(ex.InnerException.Message);
}
}
}
public class DataStore
{
public List<string> Names { get; set; }
public DataStore()
{
Names = new List<string>();
Names.Add(">");
Names.Add(">");
Names.Add(">");
Names.Add(">");
Names.Add(">");
}
}
}
This code puts both side items in center, and stretches both stackpanels.

A WPF ItemsControl and WrapPanel walk into a bar

I have a ItemsControl that displays a bunch of UserControl's inside of a WrapPanel. This works perfectly, unless I have a bunch of UserControls, and then the overflow is rendered off screen, and I can't access it. My goal is to have the WrapPanel wrap horizontally, but once the controls are off the screen, to present a scroll bar, and this seems to not work for me.
<ItemsControl ItemsSource="{Binding Servers, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5">
<local:ServerControl DataContext="{Binding }" /> <!-- The actual UserControl -->
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
When the application first starts, this is what it looks like. What you can't see if that there should be 14 boxes viewed. The WrapPanel is doing its job, but it's rendered outside of the bounds of the window.
This shows all the UserControls, but I had to expand the window to be able to see them all.
Any help would be greatly appreciated.
Full XAML:
<Window x:Class="ServerMonitor.Wpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ServerMonitor.Wpf"
xmlns:models="clr-namespace:ServerMonitor.Wpf.Models"
xmlns:System="clr-namespace:System;assembly=mscorlib"
Title="Leading Hedge Server Monitor" Height="350" Width="800">
<Window.DataContext>
<models:MainWindowViewModel>
<models:MainWindowViewModel.MachineNames>
<!-- Test Servers -->
<System:String>T009</System:String>
<System:String>T010</System:String>
<System:String>T011</System:String>
<System:String>T012</System:String>
</models:MainWindowViewModel.MachineNames>
</models:MainWindowViewModel>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Menu Grid.Row="0">
</Menu>
<ItemsControl Grid.Row="1" ItemsSource="{Binding Servers, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5">
<local:ServerControl DataContext="{Binding }" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</Grid>
</Window>

<ItemsControl ItemsSource="{Binding Servers, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5">
<local:ServerControl DataContext="{Binding }" /> <!-- The actual UserControl -->
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
OR
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Servers, Mode=OneWay}">
...
<ItemsControl/>
</ScrollViewer>

Change you second row height to *
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" /> <-- This is what you want -->
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
Setting a RowDefinition to Auto means it will calculate the cumulative DesiredHeight of all child elements in that row and assign it to the Height property of RowDefinition. So, as your WrapPanel grows, it will apply the height to that row and stretch out your parent Grid.

ListView with dynamic raws and columns that stays propetinal aytomatically

I am developing a WPF application.
have a list of user controls
<Grid >
<ListView ItemsSource="{Binding MyList}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" 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 >
<Views:MyUserControl Height="auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" SnapsToDevicePixels="True"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
And MyUserControl has another list of user controls "DetailUserControl":
<UserControl x:Class="MyUserControl"
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"
d:DesignHeight="300" d:DesignWidth="300" >
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="45" />
<RowDefinition />
</Grid.RowDefinitions>
<Border Grid.RowSpan="2" >
<StackPanel VerticalAlignment="Top" Orientation="Horizontal" HorizontalAlignment="Center" >
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10" Text="{Binding Title}" />
</StackPanel>
</Border>
<Border Grid.Row="1" Style="{StaticResource SummaryInnerFill}" >
<ItemsControl ItemsSource="{Binding DetailUserControls}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Border>
</Grid>
I used wrap panel to make all the usercontrols to be orderd from left to right one after the other.
I want the layout to be optimized and use as much as it can from the first line, and only then it will move to the second line.
here is an example (sorry for my drawing skills :) )
I have the following layout:
if I change the order inside the tiles I can have the following layout (that contains the same tiles but don't waste space an is much more organized):
Is there a panel I can use that will take care of it?

You can make use of Uniform Control Grid. You can specify Rows and Columns Properties. Controls are added to the grid in the order that they are declared.Its child controls are organised into a tabular structure of rows and columns. Unlike the Grid control, you don't have fine-grained control of the layout.
Example,
<UniformGrid Name="uniformGrid1"
Rows="2"
Columns="3">
<Button Content="blah"
Margin="2" />
<Button Content="blah1"
Margin="2" />
<Button Content="blah2"
Margin="2" />
</UniformGrid>
UniformGrid

How do I dynamically size a GridView Item?

I have a Grid View that is used to display "tags" which is a list of strings that are dynamic in size. Using the following code:
<GridView ItemsSource="{Binding Tags}"
ItemTemplate="{StaticResource TagTemplate}"
VerticalAlignment="Bottom"
Grid.RowSpan="2"
SelectionMode="None"
/>
I use the following Template for the items:
<DataTemplate x:Name="TagTemplate">
<Border BorderBrush="Gray" BorderThickness="1" Opacity="75">
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
When added to the Grid, the size of each of the items are the same size as the first:
How do I dynamically size the items within the GridView?

So something like;
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Tags}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
<!-- Or use WrapPanel depending on its display -->
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="1" Opacity="75" Padding="3" Margin="3,0">
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>