How to maximize WPF UserControl to the width of Frame? - wpf

Question

I have a Window with a Stack Panel and Frame. The Stack Panel holding my menus. On selecting menus, am loading my UserControls within the Frame.
But problem is the UserControl is displaying in the center of the Frame and not maximized.
Can anyone help me to maximize my UserControl to the width of the Frame and Resize all the controls within the UserControl?
Here is my xaml files...
UserControl:
<UserControl x:Class="PosWp.Categorys"
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"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
d:DesignHeight="400" d:DesignWidth="700" Loaded="UserControl_Loaded">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ButtonStyleDictionary.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="700">
<StackPanel Margin="0,0,0,0" Height="Auto" Width="Auto">
<TabControl Name="Tabs1" TabStripPlacement="top" BorderThickness="0" BorderBrush="#CC684331" Margin="0,0,0,0">
<TabControl.Background>
<RadialGradientBrush>
<GradientStop Color="Gray" Offset="0"/>
<GradientStop Color="Gray" Offset="0"/>
<GradientStop Color="Gray" Offset="0"/>
<GradientStop Color="Gray" Offset="0"/>
</RadialGradientBrush>
</TabControl.Background>
<TabItem Header="Category" Name="GridCat" IsSelected="False" Visibility="Hidden">
<Grid Height="280" Width="671">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="200*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="23"></RowDefinition>
<RowDefinition Height="34" />
<RowDefinition Height="143" />
<RowDefinition Height="50*"></RowDefinition>
</Grid.RowDefinitions>
<DataGrid IsReadOnly="True" AutoGenerateColumns="False" AlternatingRowBackground="Beige" Height="142" Grid.ColumnSpan="2" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,0,206,0" Name="dgCategory" VerticalAlignment="Top" Width="460" Grid.RowSpan="3" SelectionChanged="dgCategory_SelectionChanged">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Path=CategoryCode}" Header="Category" Width="200" ></DataGridTextColumn>
<DataGridTextColumn Binding="{Binding Path=Categoryname}" Header="CategoryName" Width="250" ></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
<Button x:Name="Create" Template="{StaticResource Create}" Height="30" HorizontalAlignment="Left" Grid.Row="3" Margin="40,0,0,0" Click="Create_Click" VerticalAlignment="Top" Width="75" />
<Button x:Name="Edit" Template="{StaticResource Edit}" Height="30" HorizontalAlignment="Left" Grid.Row="3" Margin="120,0,0,0" Click="Edit_Click" VerticalAlignment="Top" Width="75" />
<Button x:Name="Delete" Template="{StaticResource Delete}" Height="30" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="1" Click="Delete_Click" Margin="0,0,0,0" VerticalAlignment="Top" Width="75" />
<Button x:Name="Exit" Template="{StaticResource Exit}" Height="30" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="1" Click="Exit_Click" Margin="80,0,0,0" VerticalAlignment="Top" Width="78" />
<Label Content="Category Master" FontWeight="Bold" Grid.ColumnSpan="2" Height="28" HorizontalAlignment="Left" Margin="167,-39,0,0" Name="lblgrid" VerticalAlignment="Top" Width="136" />
</Grid>
</TabItem>
<TabItem Header="Category" Name="Cat" Visibility="Hidden">
<Grid Height="280" Width="689">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label Content="CategoryCode" FontWeight="Bold" FontSize="12" Name="lblCatcode" Width="110" Margin="0,29,0,16" Height="25" HorizontalAlignment="Right"></Label>
<Label Content="CategoryName" FontWeight="Bold" FontSize="12" Grid.Row="1" Name="lblCatName" Width="110" Margin="0,22,0,23" HorizontalAlignment="Right"></Label>
<TextBox Name="txtCatcode" Grid.Column="1" Width="170" HorizontalAlignment="Left" Margin="0,28,0,17" Height="25"></TextBox>
<TextBox Name="txtCatName" Grid.Column="1" Grid.Row="1" Width="170" HorizontalAlignment="Left" Margin="0,22,0,0" Height="25" VerticalAlignment="Top"></TextBox>
<Button x:Name="Save" Template="{StaticResource Save}" Grid.Column="1" Grid.Row="2" Margin="5,0,0,0" HorizontalAlignment="Left" Click="Save_Click" Width="85" Height="30" ></Button>
<Button x:Name="Update" Template="{StaticResource Update}" Visibility="Hidden" Grid.Column="1" Grid.Row="2" Margin="5,0,0,0" Click="Update_Click" HorizontalAlignment="Left" Width="85" Height="30" ></Button>
<Button x:Name="Remove" Template="{StaticResource Remove}" Visibility="Hidden" Grid.Column="1" Grid.Row="2" Margin="5,0,0,0" Click="Remove_Click" HorizontalAlignment="Left" Width="85" Height="30"></Button>
<Button x:Name="Close" Template="{StaticResource Close}" Grid.Column="1" Grid.Row="2" Margin="95,0,0,0" HorizontalAlignment="Left" Height="30" Click="Close_Click" Width="85"></Button>
<Label Content="Category Master" FontWeight="Bold" Grid.ColumnSpan="2" Height="28" HorizontalAlignment="Left" Margin="167,-39,0,0" Name="lblcategory" VerticalAlignment="Top" />
</Grid>
</TabItem>
</TabControl>
</StackPanel>
</ScrollViewer>
</UserControl>
Window xaml:
<Window x:Class="PosWp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="650" ResizeMode="CanResize" WindowState="Maximized" WindowStartupLocation="CenterScreen">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="CornflowerBlue" />
<Setter Property="Height" Value="22" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Height="{TemplateBinding Height}">
<Grid.RowDefinitions>
<RowDefinition Height="1.8*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.RowSpan="2" RadiusX="7" RadiusY="7" Fill="{TemplateBinding Background}">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="HotPink" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle Margin="3,1" RadiusX="3" RadiusY="3">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#dfff" />
<GradientStop Offset="1" Color="#0fff" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Grid.RowSpan="3" Margin="13,2,13,4" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.Background>
<RadialGradientBrush>
<GradientStop Color="#FFF3F3F3" Offset="0"/>
<GradientStop Color="#FFEBEBEB" Offset="0"/>
<GradientStop Color="#FFDDDDDD" Offset="0"/>
<GradientStop Color="#FF28BCE6" Offset="0"/>
</RadialGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="321*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="0" Height="Auto" Width="Auto" >
<StackPanel Grid.Column="0" Height="Auto" Orientation="Vertical" ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel HorizontalAlignment="Left" Grid.Column="0" Height="Auto" Width="220" >
<Expander Header="Master" HorizontalAlignment="Left" Grid.Column="0" FontWeight="Bold" Width="200" Height="Auto" >
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Auto" >
<StackPanel HorizontalAlignment="Left" Height="Auto" Width="200" >
<Button Content="Category" Margin="10,0,0,0" Name="btnMasCat" Click="btnMasCat_Click"/>
<Button Content="Department" Margin="10,0,0,0" Name="btnMasDep" Click="btnMasDep_Click" />
<Button Content="Employee" Margin="10,0,0,0" Name="btnMasEmp" Click="btnMasEmp_Click" />
<Button Content="Kitchen" Margin="10,0,0,0" Name="btnMasKit" Click="btnMasKit_Click"/>
<Button Content="PayMode" Margin="10,0,0,0" Name="btnMasPay" Click="btnMasPay_Click"/>
<Button Content="Modifier" Margin="10,0,0,0" Name="btnMasMod" Click="btnMasMod_Click"/>
<Button Content="PosMaster" Margin="10,0,0,0" Name="btnMasPos" Click="btnMasPos_Click"/>
<Button Content="Session" Margin="10,0,0,0" Name="btnMasSession" Click="btnMasSession_Click"/>
<Button Content="Table" Margin="10,0,0,0" Name="btnMasTable" Click="btnMasTable_Click"/>
<Button Content="Tax" Margin="10,0,0,0" Name="btnMasTax" Click="btnMasTax_Click"/>
<Button Content="Discount" Margin="10,0,0,0" Name="btnMasDis" Click="btnMasDis_Click"/>
<Button Content="ItemMaster" Margin="10,0,0,0" Name="btnMasItem" Click="btnMasItem_Click"/>
<Button Content="Shift" Margin="10,0,0,0" Name="btnMasShift" Click="btnMasShift_Click"/>
<Button Content="User" Margin="10,0,0,0" Name="btnMasUser" Click="btnMasUser_Click"/>
<Button Content="RoomMaster" Margin="10,0,0,0" Name="btnMasRoom" Click="btnMasRoom_Click"/>
<Button Content="Unit" Margin="10,0,0,0" Name="btnMasUnit" Click="btnMasUnit_Click"/>
</StackPanel>
</StackPanel>
</Expander>
<Expander Header="Transaction" HorizontalAlignment="Left" FontWeight="Bold" Width="200" Height="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel HorizontalAlignment="Left" Width="200" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Button Content="BookigTable" Margin="10,0,0,0" Name="btnBooking" Click="btnBooking_Click"/>
<Button Content="Button B" Margin="10,0,0,0" />
<Button Content="Button C" Margin="10,0,0,0" />
<Button Content="Button D" Margin="10,0,0,0" />
<Button Content="Button E" Margin="10,0,0,0" />
</StackPanel>
</StackPanel>
</Expander>
<Expander Header="Report" HorizontalAlignment="Left" FontWeight="Bold" Width="200" ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel HorizontalAlignment="Left" Width="200" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Button Content="Category" Margin="10,0,0,0" Name="btnRepCat" Click="btnRepCat_Click"/>
<Button Content="Department" Margin="10,0,0,0" Name="btnRepDep" Click="btnRepDep_Click"/>
<Button Content="Employee" Margin="10,0,0,0" Name="btnRepEmp" Click="btnRepEmp_Click"/>
<Button Content="Kitchen" Margin="10,0,0,0" Name="btnRepKit" Click="btnRepKit_Click"/>
<Button Content="PayMode" Margin="10,0,0,0" Name="btnRepPay" Click="btnRepPay_Click"/>
<Button Content="Modifier" Margin="10,0,0,0" Name="btnRepMod" Click="btnRepMod_Click"/>
<Button Content="PosMaster" Margin="10,0,0,0" Name="btnRepPos" Click="btnRepPos_Click"/>
<Button Content="Session" Margin="10,0,0,0" Name="btnRepsession" Click="btnRepsession_Click"/>
<Button Content="Table" Margin="10,0,0,0" Name="btnRepTable" Click="btnRepTable_Click"/>
<Button Content="Tax" Margin="10,0,0,0" Name="btnRepTax" Click="btnRepTax_Click"/>
<Button Content="Discount" Margin="10,0,0,0" Name="btnRepDis" Click="btnRepDis_Click"/>
<Button Content="ItemMaster" Margin="10,0,0,0" Name="btnRepItem" Click="btnRepItem_Click"/>
<Button Content="Shift" Margin="10,0,0,0" Name="btnRepShift" Click="btnRepShift_Click"/>
<Button Content="User" Margin="10,0,0,0" Name="btnRepUser" Click="btnRepUser_Click"/>
<Button Content="RoomMaster" Margin="10,0,0,0" Name="btnRepRoom" Click="btnRepRoom_Click"/>
<Button Content="Unit" Margin="10,0,0,0" Name="btnRepUnit" Click="btnRepUnit_Click"/>
</StackPanel>
</StackPanel>
</Expander>
</StackPanel>
</StackPanel>
</ScrollViewer>
<Frame Grid.Column="1" NavigationUIVisibility="Hidden" Margin="0,0,0,0" Name="frame1" >
<Frame.Background>
<RadialGradientBrush >
<GradientStop Color="#FFF3F3F3" Offset="0"/>
<GradientStop Color="#FFEBEBEB" Offset="0"/>
<GradientStop Color="#FFDDDDDD" Offset="0"/>
<GradientStop Color="#FF28BCE6" Offset="0"/>
</RadialGradientBrush>
</Frame.Background>
</Frame>
</Grid>
</Window>

Answer 1

When you set the Content of frame1 to the instance of your UserControl, it will take the size of the frame. The reason why you feel it is not maximized is because you have set the height and width of your elements within your UserControl (like the ScrollViewer width). Just set the Background of your UserControl to some color and at runtime you will see that it takes the size of the frame. But the content within the usercontrol is not taking the size of the usercontrol.
WPF layout is not same as Winforms and it is not a good practice to set the height and width of all your control exclusively. The controls render themselves according to their content.