CODEWITHSUNDEEP
wpfxamluwpuwp-xaml
None
None

Reputation: 5670

How to make a Line take full width of the column it is in (UWP)

I have a line like this

    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Line  x:Name="DashedBorderElement" Stroke="Red"  Grid.Column="0" StrokeThickness="2"  />
</Grid>

This line won't be visible until I giveX2="100" to it. I do not want to give any specific width to this line, I want the Line to take the width of the Grid Column it is in. How can I achieve this?

Upvotes: 0

Views: 382

Answers (2)

Clemens
Clemens

Reputation: 128013

Simpler than binding the X2 property of a Line would be a Rectangle, which is stretched automatically when you don't set its Width:

<Rectangle Fill="Red" Height="2" VerticalAlignment="Top" />

Upvotes: 1

Cortez
Cortez

Reputation: 96

Bind the X2 value to parents width

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Line  x:Name="DashedBorderElement" X2="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Grid}}" Stroke="Red" Grid.Column="0" StrokeThickness="2"  />
        </Grid>

Edit: if you want the exact width of the grid column itself change it to:

<Line  x:Name="DashedBorderElement" X2="{Binding Path= ColumnDefinitions[0].ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Grid}}" Stroke="Red" Grid.Column="0" StrokeThickness="2" ClipToBounds="False" />

Upvotes: 2

Related Questions