Search code examples
c#wpfuser-controlsgriddockpanel

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.

http://i.epvpimg.com/xavkdab.png

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);
}

Solution

  • 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">