Resizing GridSplitter

kunthavai

Hi, I am a beginner in WPF and following Sams WPF in 24 hrs. There is an exercise to do a FontViewer application using grid which displays the list of system fonts and let the user choose any font and view the corresponding font applied on a sample text. I tried using a GRIDSPLITTER which is not resizing at all. Here is the code.

        <Border Grid.ColumnSpan="2"
                CornerRadius="6"
                BorderThickness="1"
                BorderBrush="Gray"
                Background="LightGray"
                Margin="6 5 6 5">
            <TextBlock Text="Select a font from the list below. You can change the text by typing in the region at the bottom."
                   FontSize="14" TextWrapping="Wrap" VerticalAlignment="Top"/>
        </Border>
        <ListBox x:Name="FontList"
                 Grid.Row="1"
                 Grid.RowSpan="2"
                 ItemsSource="{x:Static Fonts.SystemFontFamilies}" Margin="6,5,6,5"/>
    <GridSplitter Grid.Row="1" Grid.RowSpan="2" 
                  Grid.Column="1"
                  Width="2"
                  Background="Gray"
                  ResizeDirection="Columns"
                  ResizeBehavior="PreviousAndNext" Margin="0,1,0,5" HorizontalAlignment="Left" />
        <TextBox x:Name="SampleText"
                 Grid.Row="2"
                 Grid.Column="1"
                 MinLines="4"
                 Margin="6 5 6 5"
                 TextWrapping="Wrap"
                 ToolTip="Type here to change the preview text">
            The quick brown fox jumps over the lazy dog.
        </TextBox>
    <GridSplitter Grid.Row="1"
                  Grid.Column="1"
                  Widt

AspDotNetDev

Put the grid splitter inside its own column:

  <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="64\*" />
        <RowDefinition Height="310\*" />
        <RowDefinition Height="88\*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="190.667\*" />
        <ColumnDefinition Width="2" />
        <ColumnDefinition Width="387.333\*" />
    </Grid.ColumnDefinitions>
                <Border Grid.ColumnSpan="2"
                CornerRadius="6"
                BorderThickness="1"
                BorderBrush="Gray"
                Background="LightGray"
                Margin="6 5 6 5">
            <TextBlock Text="Select a font from the list below. You can change the text by typing in the region at the bottom."
                   FontSize="14" TextWrapping="Wrap" VerticalAlignment="Top"/>
        </Border>
        <ListBox x:Name="FontList"
                 Grid.Row="1"
                 Grid.RowSpan="2"
                 ItemsSource="{x:Static Fonts.SystemFontFamilies}" Margin="6,5,6,5"/>
    <GridSplitter Grid.Row="1" Grid.RowSpan="2"                       Grid.Column="1"
                  Width="2"
                  Background="Gray"
                  ResizeDirection="Columns"
                  ResizeBehavior="PreviousAndNext" Margin="0,1,0,5" HorizontalAlignment="Stretch" />
        <TextBox x:Name="SampleText"
                 Grid.Row="2"
                 Grid.Column="2"
                 MinLines="4"
                 Margin="6 5 6 5"
                 TextWrapping="Wrap"
                 ToolTip="Type here to change the preview text">
            The quick brown fox jumps over the lazy dog.            </TextBox>
    <GridSplitter Grid.Row="1"
                  Grid.Column="1"
                  Width="2"
                  Background="Gray"
                  ResizeBehavior="PreviousAndNext"
                  ResizeDirection="Rows"/>
        <StackPanel Grid.Row="1"
                    Grid.Column="2"
                    Margin="6 5 6 5">
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
                       FontFamily="{Binding ElementName=FontList, Path=SelectedItem}"

AspDotNetDev

Also, it looks like you had two splitters. I took one out. If you want a splitter for rows too, give that splitter it's own row. This shows just the column splitter:

  <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="64\*" />
        <RowDefinition Height="310\*" />
        <RowDefinition Height="88\*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="190.667\*" />
        <ColumnDefinition Width="2" />
        <ColumnDefinition Width="387.333\*" />
    </Grid.ColumnDefinitions>
                <Border Grid.ColumnSpan="2"
                CornerRadius="6"
                BorderThickness="1"
                BorderBrush="Gray"
                Background="LightGray"
                Margin="6 5 6 5">
            <TextBlock Text="Select a font from the list below. You can change the text by typing in the region at the bottom."
                   FontSize="14" TextWrapping="Wrap" VerticalAlignment="Top"/>
        </Border>
        <ListBox x:Name="FontList"
                 Grid.Row="1"
                 Grid.RowSpan="2"
                 ItemsSource="{x:Static Fonts.SystemFontFamilies}" Margin="6,5,6,5"/>
        <TextBox x:Name="SampleText"
                 Grid.Row="2"
                 Grid.Column="2"
                 MinLines="4"
                 Margin="6 5 6 5"
                 TextWrapping="Wrap"
                 ToolTip="Type here to change the preview text">
            The quick brown fox jumps over the lazy dog.            </TextBox>
    <GridSplitter Grid.Row="1"
                  Grid.Column="1"
                  Grid.RowSpan="2"
                  Width="2"
                  Background="Gray"
                  ResizeBehavior="PreviousAndNext"
                  ResizeDirection="Columns"/>
        <StackPanel Grid.Row="1"
                    Grid.Column="2"
                    Margin="6 5 6 5">
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
                       FontFamily="{Binding ElementName=FontList, Path=SelectedItem}"
                       FontSize="10"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4"/>

kunthavai

Got it. Thank you very much