In my WPF window (.NET 4.0) I have Grid with two columns: stretched textbox (or whatever) on the left side and Expander on the right. Also in Expander I have GridSplitter, which is intended to resize both left and right columns when Expander is expanded. But it doesn't work.
This is my XAML code:
<Window x:Class="WpfApplication10.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" Name="column"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" HorizontalAlignment="Stretch" TextWrapping="Wrap"
Text="TextBox" VerticalAlignment="Stretch" Background="Aqua"/>
<Expander Grid.Column="1" Header="Expander" ExpandDirection="Left"
HorizontalAlignment="Right" Background="LightBlue" >
<Expander.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Some text Some text Some Text" Grid.Column="1"/>
<GridSplitter Grid.Column="0" Width="5"
ResizeBehavior="PreviousAndCurrent"
ResizeDirection="Columns"
HorizontalAlignment="Stretch"/>
</Grid>
</Expander.Content>
</Expander>
</Grid></Window>
Appropriate solution is found.
XAML:
<Window x:Class="WpfApplication10.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
</Window.Resources>
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" Name="leftColumn"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" Name="rightColumn" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
HorizontalAlignment="Stretch"
TextWrapping="Wrap"
Text="TextBox"
VerticalAlignment="Stretch"
Background="Aqua" />
<Expander Grid.Column="2"
Name="Expander"
Header="Expander"
ExpandDirection="Left"
Background="LightBlue"
Collapsed="Expander_Collapsed"
Expanded="Expander_Expanded" >
<TextBlock Text="Some text Some text Some Text" />
</Expander>
<GridSplitter Grid.Column="1"
Width="5"
ResizeBehavior="PreviousAndNext"
ResizeDirection="Columns"
VerticalAlignment="Stretch"
Height="Auto"
Visibility="{Binding ElementName=Expander, Path=IsExpanded,
Converter={StaticResource BoolToVisConverter}}"/>
</Grid></Window>
Code-behind:
private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
leftColumn.Width = new GridLength(1, GridUnitType.Star);
rightColumn.Width = new GridLength(1, GridUnitType.Auto);
}
private void Expander_Expanded(object sender, RoutedEventArgs e)
{
rightColumn.Width = new GridLength(1, GridUnitType.Star);
}
Your grid splitter works on the inner grid (in expander) and not on the main grid. Try this:
<Window x:Class="WpfApplication10.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="350"
Width="525">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="Auto"
Name="column" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
HorizontalAlignment="Stretch"
TextWrapping="Wrap"
Text="TextBox"
VerticalAlignment="Stretch"
Background="Aqua" />
<Expander Grid.Column="2"
Header="Expander"
ExpandDirection="Left"
Background="LightBlue">
<TextBlock Text="Some text Some text Some Text" />
</Expander>
<GridSplitter Grid.Column="1"
Width="5"
ResizeBehavior="PreviousAndNext"
ResizeDirection="Columns"
VerticalAlignment="Stretch"
Height="Auto" />
</Grid>
</Window>
Now you'd need to handle what happens to the last column when the user expands/collapses the expander.
Try this, if it helps to resolve your problem.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" Name="column"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" HorizontalAlignment="Stretch" TextWrapping="Wrap"
Text="TextBox" VerticalAlignment="Stretch"/>
<Expander Grid.Column="1" Header="Expander" ExpandDirection="Left"
HorizontalAlignment="Right">
<Expander.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Some text Some text Some Text" Grid.Column="0"/>
<GridSplitter Grid.Column="1" Width="5"
ResizeBehavior="PreviousAndCurrent"
ResizeDirection="Columns"
HorizontalAlignment="Stretch"/>
</Grid>
</Expander.Content>
</Expander>
</Grid>
Related
Right now I have this XAML layout for my WPF application:
<Window x:Class="Cabrillo_Editor.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:Cabrillo_Editor"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_Exit" Click="ExitApplication"/>
<MenuItem Header="_New"/>
<MenuItem Header="_Save" Click="SaveCabrilloFile"/>
</Menu>
<StackPanel>
<GroupBox Height="Auto" Header="General">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="185"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0" Margin="0,0,0,5">
<Label>My Call:</Label>
<TextBox Width="120" Name="CallsignTextBox" HorizontalAlignment="Right" CharacterCasing="Upper"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="0">
<Label>My Grid:</Label>
<TextBox Width="120" Name="GridTextBox" HorizontalAlignment="Right"/>
</DockPanel>
<DockPanel Grid.Row="0" Grid.Column="2">
<Label>Contest:</Label>
<ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="2">
<Label>Assisted:</Label>
<CheckBox VerticalAlignment="Center" Name="AssistedCheckBox" Margin="5,0,0,0"/>
</DockPanel>
<DockPanel Grid.Row="0" Grid.Column="4">
<Label>Band:</Label>
<ComboBox Width="150" Name="BandComboBox" Margin="5,0,0,0"/>
</DockPanel>
</Grid>
</GroupBox>
</StackPanel>
</DockPanel>
</Window>
And it looks like this:
Why, for example, is are the ComboBoxes so streched if I set the row height to "Auto" (same for the TextBoxes)?
Is there a better way to make consistent horizontal space between the columns?
This is occurring because those controls will stretch to fill their parent container by default. To override this, simply set the VeriticalAlignment property and Height property (if needed).
<ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0" VerticalAlignment=Top/>
I have the following control:
Which is defined by the following code:
<UserControl x:Class="VariantMeshEditor.Views.EditorViews.Util.BrowsableItemView"
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:common="clr-namespace:CommonDialogs.Common;assembly=CommonDialogs"
mc:Ignorable="d"
x:Name="self">
<UserControl.Resources>
<common:BoolToVisibilityConverter x:Key="BoolToHiddenConverter" TrueValue="Visible" FalseValue="Collapsed" />
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="50" Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Content="{Binding LabelName, ElementName=self}" Width="{Binding LabelLength, ElementName=self}"/>
<Label Grid.Column="1">:</Label>
<CheckBox Grid.Column="2" x:Name="CheckBox" Visibility="Collapsed" VerticalAlignment="Center"></CheckBox>
<Border x:Name="b" Grid.Column="3"/>
<TextBox Grid.Column="3" IsReadOnly="{Binding PathTextReadOnly, ElementName=self}" TextWrapping="NoWrap" VerticalAlignment="Center" Text="{Binding PathText, ElementName=self}" Width="{Binding ActualWidth, ElementName=b}"/>
<Button Grid.Column="4" Visibility="{Binding DisplayRemoveButton, ElementName=self, Converter={StaticResource BoolToHiddenConverter}}" Command="{Binding Remove, ElementName=self}" CommandParameter="{Binding}" DockPanel.Dock="Right" Width="50" >Remove</Button>
<Button Grid.Column="5" Visibility="{Binding DisplayBrowseButton, ElementName=self, Converter={StaticResource BoolToHiddenConverter}}" Command="{Binding Browse, ElementName=self}" CommandParameter="{Binding}" DockPanel.Dock="Right" Width="50" >Browse</Button>
<Button Grid.Column="6" Visibility="{Binding DisplayPreviewButton, ElementName=self, Converter={StaticResource BoolToHiddenConverter}}" Command="{Binding Preview, ElementName=self}" CommandParameter="{Binding}" DockPanel.Dock="Right" Width="50" >Preview</Button>
</Grid>
</UserControl>
My problem is that when I expand the control where this control is used and then make is smaller again, the TextBox does not get smaller. Any idea on how to resolve this? I want to label to always be fixed to the left side and the buttons to the right with the Texbox occupying whatever is left.
Normal:
Expanded:
Made smaller again:
The XAML you've posted doesn't have anything obviously wrong, and seems to work fine. I created a minimal example that doesn't have any bindings or code that we don't have access to, this is below. If you paste this into a clean WPF App you'll see it expands and shrinks without problem.
This means the problem is likely to be in code that you haven't shared somewhere (or I'm just missing it). If you can modify this example to show the issue someone may be able to help you.
<Window x:Class="WpfApp1.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel>
<UserControl
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"
x:Name="self">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="50" Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Content="Label" Width="40"/>
<Label Grid.Column="1">:</Label>
<CheckBox Grid.Column="2" x:Name="CheckBox" Visibility="Collapsed" VerticalAlignment="Center"></CheckBox>
<Border x:Name="b" Grid.Column="3"/>
<TextBox Grid.Column="3" IsReadOnly="False" TextWrapping="NoWrap" VerticalAlignment="Center" Text="Type here"/>
<Button Grid.Column="4" DockPanel.Dock="Right" Width="50" >Remove</Button>
<Button Grid.Column="5" DockPanel.Dock="Right" Width="50" >Browse</Button>
<Button Grid.Column="6" DockPanel.Dock="Right" Width="50" >Preview</Button>
</Grid>
</UserControl>
</DockPanel>
</Window>
I am trying to find the index of the StackPanel in an ListView which is filled with an binding to public ObservableCollection<Artikel> Artikels { get; set; } = new ObservableCollection<Artikel>();.
<Window x:Class="KassaBlokboek.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:KassaBlokboek"
mc:Ignorable="d"
WindowState="Maximized" ResizeMode="NoResize"
WindowStyle="None" WindowStartupLocation="CenterScreen"
Title="MainWindow" Height="350" Width="525"
MinWidth="768"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="7*"/>
</Grid.RowDefinitions>
<Image Source="Resources/LogoNew.jpg" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
<TextBox PreviewTextInput="TextBox_OnPreviewTextInput" Name="TextBox" KeyDown="ProductScanned" HorizontalAlignment="Center" Grid.Row="0" Width="768" Height="64" VerticalAlignment="Bottom" Margin="0,-25,0,5"></TextBox>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Click="ScrollUp" x:Name="HoofdButton" Grid.Row="0" Grid.Column="0">Product naar boven</Button>
<ListView ScrollViewer.VerticalScrollBarVisibility="Hidden" x:Name="listView" Grid.Row="0" Grid.RowSpan="5" Grid.Column="1"
ItemsSource="{Binding Artikels}">
<ListView.ItemTemplate>
<DataTemplate DataType="local:Artikel">
<Grid Height="{Binding ElementName=HoofdButton, Path=ActualHeight}" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Naam}"></TextBlock>
<TextBlock Text="{Binding Prijs, StringFormat=€0.00}"></TextBlock>
<TextBlock Text="{Binding Barcode}"></TextBlock>
<TextBlock Text="{Binding Aantal}"></TextBlock>
</StackPanel>
<Button Click="Verwijder" Grid.Column="1">Verwijder</Button>
<Button Click="WijzigAantal" Grid.Column="2" Margin="25,0,0,0">Aantal</Button>
<Button Click="VerhoogAantal" Grid.Column="3" Margin="25,0,0,0">+</Button>
<Button Click="VerlaagAantal" Grid.Column="4" Margin="25,0,0,0">-</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Button Click="ScrollDown" Grid.Row="4" Grid.Column="0">Product naar beneden</Button>
<StackPanel Grid.Row="5" Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Click="BetaalContant" Width="128">Contant</Button>
<Button Width="128" Margin="25,0,0,0" Click="BetaalPinnen">Pinnen</Button>
<Button Width="128" Margin="25,0,0,0" Click="Retour">Retour</Button>
</StackPanel>
<TextBlock x:Name="totaalPrijs" Margin="10,9.8,0,0" Grid.Row="5" Grid.Column="0" Text="Totaalprijs: €0.00"/>
</Grid>
</Grid>
</Window>
I need to find the index of the StackPanel, so i can edit the text in the "Aantal" TextBlock in the StackPanel.
I have WPF control:
<UserControl x:Class="MyProject.LabelWithUnit"
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="30" d:DesignWidth="150">
<Viewbox StretchDirection="Both" Stretch="Uniform">
<Grid Width="150">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label x:Name="ValueLabel" Grid.Column="0" Content="1013.0" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="18"/>
<Label x:Name="UnitLabel" Grid.Column="1" Content="m/s" Margin="1" FontSize="10" />
</Grid>
</Viewbox>
</UserControl>
How it behave now:
Default:
When width increased:
(this is what i need to change)
That how it scales when i increase height:(that should stay as it is)
How it should behave:
(only this behavior should change - "m/s" should stick to top-right corner):
So, "m/s" part should always stick to top-right corner and numeric part should stay somehow near middle. When i increase Height of my control, it should scale both Labels.
EDIT: more pictures added.
Change the stretching on the ViewBox control:
<Viewbox StretchDirection="UpOnly" Stretch="Uniform">
have you tried
<Label x:Name="UnitLabel" Grid.Column="1" Content="m/s" FontSize="10" HorizontalAlignment="Right" VerticalAlignment="Top" />
EDIT: I am also unsure how these columns are helping you
I get the style you wish simply swapping VerticalAlignment of Labels to Stretch
<UserControl x:Class="MyProject.LabelWithUnit"
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="30" d:DesignWidth="150">
<Viewbox StretchDirection="Both" Stretch="Uniform">
<Grid Width="1900">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label x:Name="ValueLabel" Grid.Column="0" Content="1013.0" Margin="0" VerticalAlignment="Stretch" HorizontalAlignment="Center" FontWeight="Bold" FontSize="18"/>
<Label x:Name="UnitLabel" Grid.Column="1" Content="m/s" Margin="1" FontSize="10" VerticalAlignment="Stretch"/>
</Grid>
</Viewbox>
</UserControl>
Try removing Width from your grid will solve your problem.
<Grid Width="150">
Edit
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="25" />
</Grid.ColumnDefinitions>
<Label x:Name="ValueLabel" Grid.Column="0" Content="1013.0" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="18"/>
<Label x:Name="UnitLabel" Grid.Column="1" Content="m/s" FontSize="10" />
</Grid>
EDIT
As try this below,
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" MaxHeight="150" MinHeight="10" MaxWidth="800" MinWidth="10" Stretch="Uniform" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Label x:Name="ValueLabel" Content="1013.0" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="18"/>
</Viewbox>
<Viewbox Grid.Column="1" MaxHeight="150" MinHeight="10" MaxWidth="800" MinWidth="10" Stretch="Uniform" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Label x:Name="UnitLabel" Content="m/s" FontSize="10" />
</Viewbox>
</Grid>
<Grid>
<Viewbox Margin="0">
<Label Margin="0" Padding="1" FontWeight="Bold"/>
</Viewbox>
<Grid SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="0.8*" />
</Grid.RowDefinitions>
<Viewbox HorizontalAlignment="Right" Stretch="Uniform" Margin="3,0">
<Label Margin="0" Padding="0"/>
</Viewbox>
</Grid>
</Grid>
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>