I'm using Mahapps.Metro.SimpleChildWindow to show a data input window. I would like for the entry window to be moveable. I've set "AllowMove" in my XAML markup, but the window still isn't moveable. Here is the XAML I'm using:
<UserControl x:Class="Project.Views.View"
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:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:simpleChildWindow="clr-namespace:MahApps.Metro.SimpleChildWindow;assembly=MahApps.Metro.SimpleChildWindow"
Dialog:DialogParticipation.Register="{Binding}"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid x:Name="RootGrid">
<simpleChildWindow:ChildWindow CloseByEscape="True"
ChildWindowWidth="500"
ChildWindowHeight="200"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="10"
ChildWindowImage="None"
BorderBrush="{DynamicResource AccentBaseColorBrush}"
GlowBrush="{DynamicResource AccentColorBrush}"
IsModal="True"
AllowMove="True"
IsOpen="{Binding IsChildWindowOpen}"
Title="View/Edit ">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Child Window Content -->
</Grid>
</simpleChildWindow:ChildWindow>
<-- Other controls and stuff -->
</Grid>
</UserControl>
I'm opening and closing the child window from the ViewModel by setting IsChildWindowOpen to true or false.
I have been looking at the examples on GitHub but the example with the moveable window is using XAML that is in an external file. I was using XAML nested in the current view so that I could bind to the current ViewModel instance.
What do I need to change to make the window moveable?
Okay, I figured it out. I needed to remove
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Center"
VerticalAlignment="Center"
from the window declaration.
<simpleChildWindow:ChildWindow CloseByEscape="True"
ChildWindowWidth="500"
ChildWindowHeight="180"
Margin="10"
BorderThickness="1"
ChildWindowImage="None"
BorderBrush="{DynamicResource AccentBaseColorBrush}"
CloseOnOverlay="True"
GlowBrush="{DynamicResource AccentColorBrush}"
AllowMove="True"
IsOpen="{Binding IsChildWindowOpen}"
</simpleChildWindow:ChildWindow>
Related
I am new to WPF , i can't find a way to open a new WPF window on the same main WPF app
i tried Frame method , here is the code :-
<Window x:Class="WPF_FINAL.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:WPF_FINAL"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
Height="768"
Width="1366"
WindowState="Maximized"
Title="MainWindow">
<Grid Background="#dff9fb"
Margin="33,10,-33,-10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="13.5" />
<ColumnDefinition Width="152" />
<ColumnDefinition Width="auto"
MinWidth="335.5" />
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Frame Margin="0,0,0.5,10"
Grid.ColumnSpan="5"
x:Name="main"
Grid.RowSpan="6">
</Frame>
</Grid>
</Window>
cs code
main.Content = new Window1();
but when i run it gives me break exception
i tried also navigation service but i found it's only associated with Pages
any suggestion how to do this ?
thank you
A Frame can host any content, even HTML.
The Page only exposes special helpers like the NavigationService to make navigation between pages more convenient.
A Window can not be the child of another element e.g. child of Frame. It must be the root element. By assigning the Window to Frame.Content the Frame beceomes the parent of the Window, which is illegal.
A simple solution would be to convert the Window1 class to a UserControl:
<UserControl x:Class="MyUserControl">
<TextBlock Text="TEST CONTROL" FontSize="25"/>
</UserControl>
Now your assignment will work:
main.Content = new MyUserControl();
or
main.Navigate(new MyUserControl());
or
main.Navigate("file path to/MyUserControl.xaml");
I have a user control with a text box and 2 buttons below it. I want the text box to stretch vertically when the parent window stretches vertically but nothing happens. Another problem is that the buttons appear bunched up under the text box when the user control is put into a window. But when I view the user control while not in a window the buttons are separated by 1 grid row. How can I get this to work properly so the text box increases in size when the parent window is stretched vertically and also have the buttons at the bottom stay away from the text box?
Here is the xaml code for the window that uses the user control:
<Window x:Class="SerialNumTool.Views.test2View"
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:SerialNumTool.UserControls"
mc:Ignorable="d"
Title="test2View" Height="300" Width="300"
VerticalAlignment="Stretch">
<Grid Margin="0,0,0,0" Background="Cyan" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
</Grid.RowDefinitions>
<StackPanel Name="MainContentAreaStackPanel" Margin="0" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="2">
<local:UserControl2 VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
</local:UserControl2>
</StackPanel>
</Grid>
</Window>
Here is the user control code:
<UserControl x:Class="SerialNumTool.UserControls.UserControl2"
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:SerialNumTool.UserControls"
mc:Ignorable="d"
d:DesignHeight="150" d:DesignWidth="200"
VerticalAlignment="Stretch">
<Grid Margin="0,0,0,0" Background="Beige" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
</Grid.RowDefinitions>
<StackPanel Background="Green" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="2">
<TextBox x:Name="TextOutputAreaTextBox"
HorizontalAlignment="Stretch" Margin="5"
VerticalAlignment="Stretch" AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"
TextWrapping="Wrap" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Green" Grid.Column="0" Grid.ColumnSpan="2"
Margin="0,0,0,0" Grid.Row="4" Grid.RowSpan="1" HorizontalAlignment="Stretch" >
<Button Content="Operation 2" Margin="5"></Button>
<Button Content="Operation 3" Margin="5"></Button>
</StackPanel>
</Grid>
</UserControl>
Thanks in advance.
You can greatly simplify your markup by using just grids.
You seem to have misunderstood the way the * gridmeasure works.
I think the markup below does what you're trying to achieve.
When you put most controls in a grid(cell) they will expand to take up all the space available. That's what you want here so all you want is grids and cells.
The * is not an abstracted measure of the actual height in the way you are using it.
You had a control spanning two rows.
I simplified that by making one of the rows 2* height.
If you wanted two controls in the right column next to it then you would of course probably want 5 rows. But you don't have that.
xmlns:local="clr-namespace:wpf_99"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
>
<Grid Background="Cyan" >
<local:UserControl2/>
</Grid>
</Window>
and
d:DesignHeight="450" d:DesignWidth="800">
<Grid Background="Beige" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox x:Name="TextOutputAreaTextBox"
HorizontalAlignment="Stretch"
Margin="5"
VerticalAlignment="Stretch"
AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"
TextWrapping="Wrap" />
<Button Content="Operation 2" Margin="5" Grid.Row="4"></Button>
<Button Content="Operation 3" Margin="5" Grid.Row="4" Grid.Column="1"></Button>
</Grid>
</UserControl>
Henk Holterman's comment to remove the StackPanel around the text solves the problem. The textbox would not vertically stretch in or outside a user control while inside a StackPanel. I had to remove the StackPanel around the textbox in the user control as well as in the window that used the user control. Below are the code updates for a working sample:
The User Control with StackPanel removed:
<UserControl x:Class="SerialNumTool.UserControls.UserControl2"
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:SerialNumTool.UserControls"
mc:Ignorable="d"
d:DesignHeight="150" d:DesignWidth="200"
VerticalAlignment="Stretch">
<Grid Margin="0,0,0,0" Background="Beige" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<TextBox x:Name="TextOutputAreaTextBox" Grid.Column="0" Grid.Row="1"
HorizontalAlignment="Stretch" Margin="5"
VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"
AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"
TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal" Background="Green" Grid.Column="0" Grid.ColumnSpan="2"
Margin="0,0,0,0" Grid.Row="4" Grid.RowSpan="1" HorizontalAlignment="Stretch" >
<Button Content="Operation 2" Margin="5"></Button>
<Button Content="Operation 3" Margin="5"></Button>
</StackPanel>
</Grid>
</UserControl>
Here is the window that used the user control:
<Window x:Class="SerialNumTool.Views.test2View"
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:SerialNumTool.UserControls"
mc:Ignorable="d"
Title="test2View" Height="300" Width="300"
VerticalAlignment="Stretch">
<Grid Margin="0,0,0,0" Background="Cyan" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".20*"/>
</Grid.RowDefinitions>
<local:UserControl2 VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="2">
</local:UserControl2>
</Grid>
</Window>
I'm developing UI for an application using WPF. I'm using command binding. Command works correctly when the button is put inside the Window. But when I put the button inside my UserControl the command parameter is null.
ViewModel code:
public RelayCommand<Window> MainCommand { get; private set; }
private void MainAction(Window window)
{
// here the parameter is null
if (window == null) return;
MainPage main = new MainPage();
main.Show();
window.Close();
}
The user control:
<UserControl x:Class="Kitchen.UI.View.HeaderFooter"
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:Kitchen.UI.View"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Skins/MainSkin.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<Grid DataContext="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="1" Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<ContentControl Content="{TemplateBinding Content}"/>
</ScrollViewer>
<Image Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Source="{StaticResource HeaderImage}"
Margin="0 10 0 0" HorizontalAlignment="Stretch" SizeChanged="Image_SizeChanged" IsHitTestVisible="False"></Image>
<Image Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="3" Source="{StaticResource FooterImage}"
Margin="0 -1 0 10" HorizontalAlignment="Stretch" Height="Auto"></Image>
</Grid>
</ControlTemplate>
</UserControl.Template>
</UserControl>
The way I put the button inside the user control:
<Window xmlns:View="clr-namespace:Kitchen.UI.View" x:Class="Kitchen.UI.View.Order" Name="OWindow" ResizeMode="NoResize" WindowState="Maximized"
WindowStartupLocation="CenterOwner" WindowStyle="None "
Width="1600"
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:ignore="http://www.galasoft.ch/ignore"
mc:Ignorable="d ignore"
DataContext="{Binding Order, Source={StaticResource Locator}}">
<View:HeaderFooter x:Name="HeaderFooter">
<Button Grid.Row="1" Grid.Column="0"
Command="{Binding ShowExitCommand}"
CommandParameter="{Binding ElementName=OWindow}"
Style="{StaticResource ImageButtonStyle}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Source="{StaticResource ButtonBack}" Width="180" Grid.ColumnSpan="2" />
<TextBlock Grid.Column="1" Grid.Row="0" Text="مشاهده سفارشات خارج شده از صف" Style="{StaticResource ImageButtonTextBlockStyle}" FontSize="15"/>
</Grid>
</Button>
</View:HeaderFooter>
</Window>
Try with x:Reference instead of ElementName, this should bring language-level support for element reference resolution, which ElementName (that operates at the framework level) may not be able to resolve.
CommandParameter="{Binding Source={x:Reference OWindow}}"
To avoid a cyclic dependency, you have to reference something that is not the container of the user control itself, for example
<Grid >
<DataGrid Name="OWindow" Width="10" Height="10"/>
<local:HeaderFooter x:Name="HeaderFooter">
<Button Grid.Row="1" Grid.Column="0"
Command="{Binding ShowExitCommand}"
CommandParameter="{Binding Source={x:Reference OWindow} }"
> <!-- instead of ElementName=OWindow -->
Please note, the above example makes clear that my answer correctly resolves the issue in a consistent context, while the circular reference is just another issue of the original code to be fixed.
Finally I changed my way through the problem. I needed a template to be applied to several windows, so I used a UserControl and it was successful as a template unless I wanted to pass the reference of the containing window of the UserControl as a parameter to a command from within the content of the UserControl.
Now I'm applying a custom ControlTemplate to the Window and it's working now.
But I think this is a bug or at least an architectural weakness for WPF. When you use {Binding ElementName=OWindow} from within the Window itself or other Controls like Grid the reference is resolved and handled but if you use it inside the user defined user control it causes the null reference.
I think this is because they are capturing the parameter at the Window construction.
Here is the parent Xaml:
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" /><!-- Should stretch vertically -->
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<!-- Menu definition removed for brevity -->
</DockPanel>
<DockPanel Grid.Row="1"
VerticalAlignment="Stretch"
LastChildFill="True">
<ItemsControl DockPanel.Dock="Top"
ItemsSource="{Binding Designer}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Stretch"
Background="YellowGreen"/>
</DockPanel>
</Grid>
The ItemsSource binding is to an ObservableCollection. When the view is added to the collection, it gets updated in the main shell (view). Here is the UserControl that is added:
<UserControl x:Class="Prototype.StateMachineDesignerApp.Views.ProjectDesigner"
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:Prototype.StateMachineDesignerApp.Views"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="500"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Stretch"
Margin="0">
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0"
BorderBrush="DimGray"
BorderThickness="1"
Background="LightSlateGray"
Margin="1" />
<Border Grid.Row="1"
Margin="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
BorderBrush="DarkGoldenrod"
BorderThickness="1" />
<GridSplitter Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<Border Grid.Column="2"
BorderBrush="DarkGoldenrod"
BorderThickness="1" />
</Grid>
</Border>
</Grid>
</UserControl>
The UserControl is not filling the entire vertical space:
Row[1] of the outermost Grid is stretching vertically as is evidenced by the ItemsControl.Background filling the area.
For reference, this is what I am expecting:
For what its worth, I've looked at numerous questions on SO regarding this exact issue but none of the solutions seem to help. Then again, none of the examples I saw used an ItemsControl with binding.
This happens because the ItemsControl throw all of our items into a vertically aligned StackPanel by default. It's very easy to change though, since the ItemsControl allows you to change which panel type is used to hold all the items.
<ItemsControl DockPanel.Dock="Top"
ItemsSource="{Binding Designer}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Stretch"
Background="Transparent">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
I have this Windows app:
<Window x:Class="PlayTube.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="800" Width="1400">
<Grid Background="#FFD86F6F">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Height="70" Background="#FF9A9A9A">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Height="25" Width="200" Name="SearchTextBox" />
<Button Grid.Column="2" Height="25" Width="80" Content="Search" Click="Button_Click" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MaxWidth="250" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="300" MaxWidth="350"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Background="#FFFFFF89">
</Grid>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC" />
<Grid Background="#FF05BECB" Grid.Column="2">
</Grid>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="3" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Grid Background="#FF4E04A7" Grid.Column="4">
<MediaElement Stretch="Fill" />
</Grid>
</Grid>
</Grid>
As you can see i have 3 Grids and i want to know if it possible the every grid will be managed from a class, because i dont want that all the logic will be in this main Windows class.
Right click on your project select the Add sub menu and then select user control, you should get this dialog.
Give the control a name and click ok
build your project and look in the toolbox, you should see right at the top that the new user control you added will be there.
drag this item in to the content of your grid and it should set everything up for you.
afer doing this my window now looks like
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:UserControl1 HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>
</Grid>
</Window>