CODEWITHSUNDEEP
wpfxaml
Force444
Force444

Reputation: 3381

WPF - Two Columns align right column

I have the following XAML, which I have tried to simplify and removed irrelevant code such as name, content, bindings etc.

The problem is that the textbox on the right is not very nicely aligned. I expect the textboxes to be aligned so they are of equal width.

enter image description here

XAML code:

<StackPanel Grid.Row="1" Grid.RowSpan="2" Grid.Column="1" MinWidth="200" HorizontalAlignment="Right">
<GroupBox >
    <GroupBox.HeaderTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Row="0" Grid.Column="1" Margin="5"/>
            </Grid>
        </DataTemplate>
    </GroupBox.HeaderTemplate>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="69"/>
            <ColumnDefinition Width="6"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
        <TextBox Grid.Column="2" Grid.Row="0" Margin="5,7" VerticalAlignment="Center"/>

        <Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
        <TextBox Grid.Column="2" Grid.Row="1" Margin="5,7" VerticalAlignment="Center"/>

        <ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
                        <TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</GroupBox>
</StackPanel>

I have tried a lot of different combinations but can't get it to as I want for my end goal.

Upvotes: 1

Views: 905

Answers (1)

Mishka
Mishka

Reputation: 516

You can specify on the Grid above the Itemscontrol: Grid.IsSharedSizeScope='True'. Then, in the DataTemplate for item, specify on the first ColumnDefinition: SharedSizeGroup='LabelsColumn(or any name you like)'. That will recalculate automatically the width of the first column, to be as long as the longest text/Label(in this scenario). Example:

<StackPanel Grid.Row="1"
                Grid.RowSpan="2"
                Grid.Column="1"
                MinWidth="200"
                HorizontalAlignment="Right">
        <GroupBox>
            <GroupBox.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Row="0"
                                   Grid.Column="1"
                                   Margin="5" />
                    </Grid>
                </DataTemplate>
            </GroupBox.HeaderTemplate>
            <Grid Grid.IsSharedSizeScope="True">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" 
                                      SharedSizeGroup="Labels"/>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0"
                       Grid.Row="0"
                       Margin="5"
                       VerticalAlignment="Center"
                       Grid.ColumnSpan="2" />
                <TextBox Grid.Column="1"
                         Grid.Row="0"
                         Margin="5,7"
                         VerticalAlignment="Center" />

                <Label Grid.Column="0"
                       Grid.Row="1"
                       Margin="5"
                       VerticalAlignment="Center"
                       Grid.ColumnSpan="2" />
                <TextBox Grid.Column="1"
                         Grid.Row="1"
                         Margin="5,7"
                         VerticalAlignment="Center" />

                <ItemsControl Grid.Row="2"
                              Grid.Column="0"
                              Grid.ColumnSpan="3">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"
                                                      SharedSizeGroup="Labels"/>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <Label Grid.Column="0"
                                       Grid.Row="0"
                                       Margin="5"
                                       VerticalAlignment="Center" />
                                <TextBox Grid.Column="1"
                                         Grid.Row="0"
                                         Margin="5"
                                         VerticalAlignment="Center" />
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </GroupBox>
    </StackPanel>

Upvotes: 1

Related Questions