locked
XAML to put vertical Gridsplitter between Left Main and Right Main Content Areas? RRS feed

  • Question

  • This is what my Window looks like .  Given the xaml below that creates the Window, where would I put the xaml and what would it look like to introduce a vertical gridsplitter between the buttons on the panel on the left (Left Region) and the Grid that contains the 4 rectangles in the Right Main Content Area?  thank you.  I couldn't figure out how to do this automatically by dragging the control onto the Objects and Timeline panel to create it.

    <Window x:Class="WPF_Tour_From Sacha Barber"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowStartupLocation="CenterScreen"  
      Title="XAML to put vertical Gridsplitter between Left Main and Right Main Content Areas? " Width="640" Height="480" >
    
      <DockPanel Width="Auto" Height="Auto" LastChildFill="True">
        <!--Top Menu Area-->
        <Menu Width="Auto" Height="20" Background="SteelBlue" DockPanel.Dock="Top">
          <!-- File Menu -->
          <MenuItem Header="File">
            <MenuItem Header="Save"/>
            <Separator/>
            <MenuItem Header="Exit"/>
          </MenuItem>
          <!-- About Menu -->
          <MenuItem Header="Help">
            <MenuItem Header="About"/>
          </MenuItem>
        </Menu>
    
        <!--Bottom Status Bar area, declared before middle section, as I want it to fill entire
        bottom of Window, which it wouldnt if there was a Left docked panel before it -->
        <StackPanel Width="Auto" Height="31" Background="LightGray" Orientation="Horizontal" DockPanel.Dock="Bottom">
          <Label Width="155" Height="23" Content="Status Bar Message...." FontFamily="Arial" FontSize="10"/>
        </StackPanel>
    
        <!--Left Main Content area-->
        <StackPanel Width="136" Height="Auto" Background="Gray">
          <Button Margin="5,5,5,5" Width="Auto" Height="26" Content="button1"/>
          <Button Width="126" Height="26" Content="button2" Margin="5,5,5,5"/>
          <Button Width="126" Height="26" Content="button3" Margin="5,5,5,5"/>
        </StackPanel>
    
    
        <!--Right Main Content area, NOTE HOW this Grid is the last child
        so takes all the remaining room -->
        <Grid Width="Auto" Height="Auto" Background="White">
    
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
    
          <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
    
          <Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="0" Grid.Column="0"/>
          <Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="0" Grid.Column="1"/>
          <Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="1" Grid.Column="0"/>
          <Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="1" Grid.Column="1"/>
        </Grid>
    
      </DockPanel>
    </Window>
    
    
    Thursday, March 24, 2011 7:18 PM

Answers

  • Here you go. The key here is to add a grid that contains your 2 "content" areas, with 3 columns, the left piece goes in col 0, the right in col 2, and the grid splitter in col 1.

     

    <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" mc:Ignorable="d"
    	x:Class="WpfApplication2.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	 <DockPanel Width="Auto" Height="Auto" LastChildFill="True">
      <!--Top Menu Area-->
      <Menu Width="Auto" Height="20" Background="SteelBlue" DockPanel.Dock="Top">
       <!-- File Menu -->
       <MenuItem Header="File">
        <MenuItem Header="Save"/>
        <Separator/>
        <MenuItem Header="Exit"/>
       </MenuItem>
       <!-- About Menu -->
       <MenuItem Header="Help">
        <MenuItem Header="About"/>
       </MenuItem>
      </Menu>
    
      <!--Bottom Status Bar area, declared before middle section, as I want it to fill entire
      bottom of Window, which it wouldnt if there was a Left docked panel before it -->
      <StackPanel Width="Auto" Height="31" Background="LightGray" Orientation="Horizontal" DockPanel.Dock="Bottom">
       <Label Width="155" Height="23" Content="Status Bar Message...." FontFamily="Arial" FontSize="10"/>
      </StackPanel>
    
    	 	<Grid>
    	 		<Grid.ColumnDefinitions>
    	 			<ColumnDefinition Width="auto"/>
    				<ColumnDefinition Width="auto"/>
    	 			<ColumnDefinition Width="*"/>
    	 		</Grid.ColumnDefinitions>
    <!--Left Main Content area-->
    	 		<StackPanel Height="Auto" Background="Gray">
    	 			<Button Margin="5,5,5,5" Width="Auto" Height="26" Content="button1"/>
    	 			<Button Width="126" Height="26" Content="button2" Margin="5,5,5,5"/>
    	 			<Button Width="126" Height="26" Content="button3" Margin="5,5,5,5"/>
    	 		</StackPanel>
    
    
      <!--Right Main Content area, NOTE HOW this Grid is the last child
      so takes all the remaining room -->
    	 		<Grid Width="Auto" Height="Auto" Background="White" Grid.Column="2">
    
    	 			<Grid.ColumnDefinitions>
    	 				<ColumnDefinition Width="*"/>
    	 				<ColumnDefinition Width="*"/>
    	 			</Grid.ColumnDefinitions>
    
    	 			<Grid.RowDefinitions>
    	 				<RowDefinition Height="*"/>
    	 				<RowDefinition Height="*"/>
    	 			</Grid.RowDefinitions>
    
    	 			<Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="0" Grid.Column="0"/>
    	 			<Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="0" Grid.Column="1"/>
    	 			<Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="1" Grid.Column="0"/>
    	 			<Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="1" Grid.Column="1"/>
    	 		</Grid>
    	 		<GridSplitter HorizontalAlignment="Stretch" Margin="0" Width="5" Grid.Column="1" d:LayoutOverrides="Width" Background="Red"/>
    
    	 	</Grid>
    
     </DockPanel>
    </Window>
    

    • Marked as answer by hazz Friday, March 25, 2011 2:06 AM
    Thursday, March 24, 2011 8:30 PM
    Moderator