CODEWITHSUNDEEP
wpfxaml
agiro
agiro

Reputation: 2080

WPF XAML - Line not showing up at all

I made a simple UI where I wanted to make a border to a Grid row's bottom. I aimed a using a Line like so:

<Window x:Class="HP_hf_shop.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:HP_hf_shop"
    mc:Ignorable="d"
    Title="MainWindow" Height="500" Width="800"
    >
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="10*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="2.5*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Bottom"
            Margin="10,0,10,0">
        <Border.Background>
            <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                <GradientStop Color="DarkGray" Offset="0.05"/>
                <GradientStop Color="Gray" Offset="0.15"/>
                <GradientStop Color="Gray" Offset="0.85"/>
                <GradientStop Color="DarkGray" Offset="0.95"/>
            </LinearGradientBrush>
        </Border.Background>
    </Border>
    <Button Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" Margin="10,30,10,10">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="5*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        </Grid>
    </Button>

    <Button Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" Margin="10,10,10,10">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="5*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        </Grid>
    </Button>

    <Button Grid.Row="1" Grid.Column="2" HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" Margin="10,30,10,10">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="5*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        </Grid>
    </Button>
</Grid>

I tried using a solid colour onstead of the Brush I set up here and I made sure that when I highlight the line itself, the highlight does have a coverage (it appears as a rectangle opposed to a single line, so it should be visible). Be advised I'm not using a Canvas. The line is on the Grid with some buttons. Any ideas why the line doesn't show up at all, not even during runtime?

Upvotes: 2

Views: 3773

Answers (1)

mm8
mm8

Reputation: 169200

Any ideas why the line doesn't show up at all, not even during runtime?

You need to set the X1 and X2 properties of the Line for a horizontal line to be drawn:

<Line Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Bottom"
          HorizontalAlignment="Stretch" StrokeThickness="10" Margin="10,0,10,0"
          X1="0" X2="100">
    <Line.Stroke>
        <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
            <GradientStop Color="DarkGray" Offset="0.05"/>
            <GradientStop Color="Gray" Offset="0.15"/>
            <GradientStop Color="Gray" Offset="0.85"/>
            <GradientStop Color="DarkGray" Offset="0.95"/>
        </LinearGradientBrush>
    </Line.Stroke>
</Line>

If you want the brush to fill the grid row you should probably use another element that stretches to fill the available space, like for example a Border:

<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Bottom"
                Margin="10,0,10,0">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
            <GradientStop Color="DarkGray" Offset="0.05"/>
            <GradientStop Color="Gray" Offset="0.15"/>
            <GradientStop Color="Gray" Offset="0.85"/>
            <GradientStop Color="DarkGray" Offset="0.95"/>
        </LinearGradientBrush>
    </Border.Background>
    <TextBlock />
</Border>

Upvotes: 4

Related Questions