0

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?

10
  • I have to wonder if those spaces aren't coming from the string value you're populating the TextBlock with perhaps as opposed to the TextBlock itself.
    – Chris W.
    May 5, 2014 at 15:57
  • I don't think so because if I make column 0's width auto instead of 70 the "Name" text lines up right next to the toggle like you would expect. [toggle]Name May 5, 2014 at 16:00
  • 1
    Throw ShowGridLines="True" on your grid and see where your boundaries actually are, the way you have it should be fine so there's got to be something else awry.
    – Chris W.
    May 5, 2014 at 16:02
  • The grid lines show faulty as well. The "Name" text is left aligned to column 1, but column 0 seems to have a variable width. May 5, 2014 at 16:04
  • 1
    Sounds like much more would need to be seen to troubleshoot this one, I'd be looking at inherited styles and the likes from further up the tree. Anything that could interact with the elements used that could cause your trouble.
    – Chris W.
    May 5, 2014 at 16:23

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.