Develop Reference

Stretch Usercontrol in Dockpanel

I'm new at WPF. I know from Forms that i can add usercontrols to a panel. How can I do this in WPF? I tried a Grid, DockPanel and StackPanel but I don't know how can I stretch my usercontrol? In this Grid oder what else will only be this usercontrol.
I need to switch the content of the grid or else because I want to display different usercontrols.
Main XAML
<Window x:Class="TaxHelper.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:entites="clr-namespace:TaxHelper.Entity"
xmlns:local="clr-namespace:TaxHelper"
xmlns:properties="clr-namespace:TaxHelper.Properties"
mc:Ignorable="d"
Title="TaxHelper" Height="558" Width="803">
<Window.Resources>
<local:InvoiceStatusIconConverter x:Key="IconConverter"/>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="251*"/>
<ColumnDefinition Width="292*"/>
</Grid.ColumnDefinitions>
<DockPanel LastChildFill="True">
<Menu DockPanel.Dock="Top" Height="20" Margin="0,0,10,0">
<MenuItem Header="Datebank" Height="20">
<MenuItem Header="Importieren" Name="miImport" Click="miImport_Click"/>
</MenuItem>
<MenuItem Header="Daten" Height="20">
<MenuItem Header="Laden" Name="miLoadData" Click="miLoadData_Click"/>
</MenuItem>
<MenuItem Header="Tests" Height="20">
<MenuItem Header="Add Usercontrol" Name="miTestbutton" Click="miTestbutton_Click"/>
</MenuItem>
</Menu>
<StackPanel></StackPanel>
</DockPanel>
<TreeView x:Name="tvNavigation" Margin="10,26,10,10" HorizontalContentAlignment="Stretch" TreeViewItem.Expanded="tvNavigation_Expanded">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type entites:Owner}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type entites:EconomyUnit}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type entites:Report}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type entites:ReportItem}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type entites:Invoice}" ItemsSource="{Binding Items}">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Status, Converter={StaticResource IconConverter}}" MaxHeight="16px" MaxWidth="16px" HorizontalAlignment="Left"></Image>
<TextBlock Text="{Binding Company}"/>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
<!--<StackPanel x:Name="dpContent" Orientation="Vertical" HorizontalAlignment="Stretch" Height="507" Margin="10,10,10,0" VerticalAlignment="Top" Width="408" Grid.Column="1"/>-->
<Grid Height="Auto" Name="dpContent" Width="Auto" Grid.Column="1" Margin="24,26,29,10">
</Grid>
</Grid>
</Window>
Usercontrol:
<UserControl x:Class="TaxHelper.Invoice"
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:TaxHelper"
xmlns:mpp="clr-namespace:MoonPdfLib;assembly=MoonPdfLib"
mc:Ignorable="d" Height="152.438" Width="132.531">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="81*"/>
<RowDefinition Height="14*"/>
</Grid.RowDefinitions>
<mpp:MoonPdfPanel Background="LightGray" ViewType="SinglePage" PageRowDisplay="ContinuousPageRows" PageMargin="0,2,4,2" AllowDrop="True" x:Name="mpp" x:FieldModifier="private"/>
<StackPanel Margin="0,1,0,0" Grid.Row="1">
<Button Content="Exit" Click="Button_Click" Height="12" FontSize="5" />
</StackPanel>
</Grid>
</UserControl>
Add Usercontrol:
private void miTestbutton_Click(object sender, RoutedEventArgs e)
{
Invoice invoice = new Invoice();
invoice.HorizontalAlignment = HorizontalAlignment.Stretch;
invoice.VerticalAlignment = VerticalAlignment.Stretch;
dpContent.Children.Add(invoice);
}

The declaration of the UserContol is setting hard coded values for Width and Height, which means that the control cannot resize itself.
If you replace those two attributes with d:DesignWidth and d:DesignHeight then those values become "design-time only" values, so those values will be used when you view the control in the Visual Studio designer, but not by the application at run-time...
<UserControl x:Class="TaxHelper.Invoice"
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:TaxHelper"
xmlns:mpp="clr-namespace:MoonPdfLib;assembly=MoonPdfLib"
mc:Ignorable="d" d:DesignHeight="152.438" d:DesignWidth="132.531">

How to display my TextBlock of ListBox HORIZONTALLY in RSS Feed WPF code

I know it's simple but I spent a lot of time to display my the list horizontally. I even put the make StackPanel orientation "Horizontal" but all in vain. Can anyone help with this? I would really appreciate that.
<Window x:Class="RssFeed_Wpf.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:RssFeed_Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<XmlDataProvider x:Key="DataRss" XPath="//item" Source="http://www.abc.net.au/news/feed/52278/rss.xmlhttp://www.abc.net.au/news/feed/45910/rss.xml">
</XmlDataProvider>
</Window.Resources>
<ListBox ItemsSource="{Binding Source = {StaticResource DataRss}}" Background="Black" HorizontalContentAlignment="Left" BorderBrush="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding XPath=title}" FontWeight="Bold" Name="txtScrolling" FontFamily="calibri" Foreground="#f4b042" Height="20pt">
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Window>
You can see here, The list is shown vertically but I want this horizontally:

Because your StackPanel is in the DataTemplate there is a StackPanel created for every item in the ListBox. To change the container for the ListBox you need to sets it ItemsPanel
<ListBox >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

Listbox does not show items c# xaml

i have written this in xaml:
<ListBox x:Name="WorkersList">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding name}"></TextBlock>
<TextBlock Text="{Binding gehalt}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Then i wrote a c# class called "worker" and added the follwing code to the mainpage.cs:
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
List<Worker> sourceworkerlist = new List<Worker>();
sourceworkerlist.Add(new Worker { name = "Franz", gehalt = 200 });
WorkersList.DataContext = sourceworkerlist;
}
}
I ran the program but the result is I dont see the listboxitem :( what did i do wrong? Thx for your answers!

If you want to use DataContext in your code behind as posted, then your XAML should look like this:
<ListBox x:Name="WorkersList" d:DataContext="{d:DesignInstance {x:Type local:Worker}}" ItemsSource="{Binding Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding name}"/>
<TextBlock Text="{Binding gehalt}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This is the complete XAML file:
<Window
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:WpfApplication11" mc:Ignorable="d"
x:Class="WpfApplication11.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox x:Name="WorkersList" d:DataContext="{d:DesignInstance {x:Type local:Worker}}" ItemsSource="{Binding Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding name}"/>
<TextBlock Text="{Binding gehalt}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>

You need to bind ItemsSource to DataSource, or set ItemsSource in the code.
WorkersList.ItemsSource = sourceworkerlist;
or
<ListBox x:Name="WorkersList" ItemsSource="{Binding}">

Fix listview's height to empty space

I'm new with WPF and want to set the listview's height to the bottom of my frame. The listview's width ist already set with a fix value. The following code represents my DockPanel:
<DockPanel
Name="dp"
Width="200"
HorizontalAlignment="Left">
<TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
<ListView Width="{Binding Path=ActualWidth, ElementName=dp}" Background="Yellow" DockPanel.Dock="Left">
<ListViewItem Content="foobar"/>
<ListViewItem Content="foobar2"/>
</ListView>
</DockPanel>
The first screenshot will show the current szenario:
http://i.imgur.com/XMbMh4t.png
and the heigth shell strech to the height as it is shown in the next picture:
http://i.imgur.com/Tf7O4pK.png
Thanks a lot!
Best regards

Instead of this:
<Window>
<DockPanel>
<Menu DockPanel.Dock="Top">
</Menu>
<DatePicker DockPanel.Dock="Top" />
<TabControl>
<TabItem>
<StackPanel>
</StackPanel>
</TabItem>
<TabItem>
<StackPanel>
<Grid>
</Grid>
<DockPanel>
<TextBox DockPanel.Dock="Top" />
<ListView>
</ListView>
</DockPanel>
</StackPanel>
</TabItem>
<TabItem>
</TabItem>
</TabControl>
</DockPanel>
</Window>
Try this:
<Window>
<DockPanel>
<Menu DockPanel.Dock="Top">
</Menu>
<DatePicker DockPanel.Dock="Top" />
<TabControl>
<TabItem>
<StackPanel>
</StackPanel>
</TabItem>
<TabItem>
<DockPanel> <!-- instead of StackPanel -->
<Grid DockPanel.Dock="Top">
</Grid>
<!-- can now get rid of this <DockPanel> -->
<TextBox DockPanel.Dock="Top" />
<ListView>
</ListView>
</DockPanel>
</TabItem>
<TabItem>
</TabItem>
</TabControl>
</DockPanel>
</Window>

You need to use VerticalAlignment="Stretch" on the ListView element. The same is true for HorizontalAlignment if you need to do the same horizontally.
<DockPanel
Name="dp"
Width="200"
HorizontalAlignment="Left">
<TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
<ListView Width="{Binding Path=ActualWidth, ElementName=dp}" VerticalAlignment="Stretch" Background="Yellow" DockPanel.Dock="Left">
<ListViewItem Content="foobar"/>
<ListViewItem Content="foobar2"/>
</ListView>
</DockPanel>
See http://msdn.microsoft.com/en-us/library/ms751709(v=vs.110).aspx for more information.
I have tested your code using VerticalAlignment="Stretch", and I am getting your desired result:
<Window x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DockPanel
Name="dp"
Width="200"
HorizontalAlignment="Left">
<TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
<ListView Width="{Binding Path=ActualWidth, ElementName=dp}" VerticalAlignment="Stretch" Background="Yellow" DockPanel.Dock="Left">
<ListViewItem Content="foobar"/>
<ListViewItem Content="foobar2"/>
</ListView>
</DockPanel>
</Grid>
</Window>
If you cannot get the VerticalAlignment to work properly, we can bind the ActualHeight of an element to its ancestor element. So, add this to your ListView:
Height="{ Binding Path=ActualHeight, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={ x:Type Window } } }"

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