CODEWITHSUNDEEP
wpfxamlgridmultiple-columns
Price Jones
Price Jones

Reputation: 2008

How do I get my grid to do fixed width on the first column and arbitrary length on the second but align properly?

I have a Grid like so:

    <DataTemplate DataType="{x:Type sync:SyncObject}">
        <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="70"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <ToggleButton IsChecked="{Binding IsKept}" Style="{DynamicResource IsKeptStyle}" Width="50" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left"/>
            <TextBlock Text="{Binding Name}" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left"/>
            <ListBox ItemsSource="{Binding Properties}" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" BorderThickness="0"/>
        </Grid>
    </DataTemplate>

However, when I run the window, column 1 (the second column) is randomly spaced (something like this):

[toggle]                             Name
[toggle]                           Name
[toggle]                              Name

Why? What am I doing wrong? Doesn't it makes sense that it should be:

[toggle]    Name
[toggle]    Name
[toggle]    Name

Since the column has a fixed width?

Here is the style for the toggle:

    <Style TargetType="{x:Type ToggleButton}" x:Key="IsKeptStyle">
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="False">
                <Setter Property="Content" Value="Replace"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Content" Value="Keep"/>
            </Trigger>
        </Style.Triggers>
    </Style>

EDIT: It seems that removing the ListBox causes it to align properly, but I need the listbox. Any ideas?

Upvotes: 0

Views: 3428

Answers (1)

Price Jones
Price Jones

Reputation: 2008

I slept on it. This is the solution:

    <DataTemplate DataType="{x:Type sync:SyncObject}">
        <Grid HorizontalAlignment="Stretch" ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" HorizontalAlignment="Stretch" ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <ToggleButton IsChecked="{Binding IsKept}" Style="{DynamicResource IsKeptStyle}" Width="50" Grid.Column="0" HorizontalAlignment="Left"/>
                <TextBlock Text="{Binding Name}" Grid.Column="1" HorizontalAlignment="Left"/>
            </Grid>
            <ListView ItemsSource="{Binding Properties}" Grid.Row="1" HorizontalAlignment="Stretch" BorderThickness="0" Grid.IsSharedSizeScope="True"/>
        </Grid>
    </DataTemplate>

Instead of stuffing everything into one grid with two rows and letting the rows do all the work of sorting out the column spacing (i.e. Grid.ColumnSpan="2"), I created a grid with two rows, but row one is a grid that handles the column spacing.

Upvotes: 1

Related Questions