How to set Right Border of a Column in a Grid?

Question

I have a Grid like this:

<Grid>     
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>


        <TextBlock Grid.Row="0" Grid.Column="0">Row 0, Column 1</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="0">Row 1, Column 1</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="0">Row 2, Column 1</TextBlock>
        <TextBlock Grid.Row="3" Grid.Column="0">Row 3, Column 1</TextBlock>

        <TextBlock Grid.Row="0" Grid.Column="1" Grid.RowSpan="4">Column 1</TextBlock>
    </Grid>

I am not going to actually use TexBlocks in the real application, I used them to make the example easier. Basically I want to Set the border that devides all the content in Column 0 from Column 1.

How do you do that?

Answer 1

One of the best ways to display a Border is to use a Border element. You can just declare it behind the other content:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="4*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>

    <Border Grid.Column="1" Grid.RowSpan="4" BorderBrush="Black" 
        BorderThickness="1,0,0,0" Background="{x:Null}" />

    <TextBlock Grid.Row="0" Grid.Column="0">Row 0, Column 1</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="0">Row 1, Column 1</TextBlock>
    <TextBlock Grid.Row="2" Grid.Column="0">Row 2, Column 1</TextBlock>
    <TextBlock Grid.Row="3" Grid.Column="0">Row 3, Column 1</TextBlock>
    <TextBlock Grid.Row="0" Grid.Column="1" Grid.RowSpan="4">Column 1</TextBlock>
</Grid>

Answer 2

There's a number of ways to accomplish it, easiest, just draw a line (except I cheated and used a shape...I know, horrible of me right? But you get the idea..) Hope this helps.

<Grid>     
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

        <Rectangle Grid.RowSpan="4" Width="1" Fill="Red" HorizontalAlignment="Right"/>

        <TextBlock Grid.Row="0" Grid.Column="0">Row 0, Column 1</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="0">Row 1, Column 1</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="0">Row 2, Column 1</TextBlock>
        <TextBlock Grid.Row="3" Grid.Column="0">Row 3, Column 1</TextBlock>

        <TextBlock Grid.Row="0" Grid.Column="1" Grid.RowSpan="4">Column 1</TextBlock>
    </Grid>