roryok
roryok

Reputation: 9645

Fixed width columns inside a XAML GridView

I have a XAML GridView, each row of which contains a Grid. I'm trying to align all the columns together like I would in a HTML table but I'm not having any luck. Here's my XAML

<Grid Grid.Row="1" Grid.ColumnSpan="2" Margin="20,0,20,0" Background="BlueViolet">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="8*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Text="Name" Margin="5" />
    <TextBlock Grid.Column="1" Text="WordCount" Margin="5" />
    <TextBlock Grid.Column="2" Text="Created" Margin="5" />
    <TextBlock Grid.Column="3" Text="Updated" Margin="5" />
    <TextBlock Grid.Column="4" Text="Version" Margin="5" />
</Grid>

<GridView Grid.Row="2" Grid.ColumnSpan="2" x:Name="Files_Grid" Margin="20,0,20,20" ItemsSource="{Binding ElementName=App_Frame, Path=DataContext.FilesCollection}" 
            ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Visible" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid Tapped="Files_Grid_Row_Tapped" RightTapped="Files_Grid_Row_RightTapped" Tag="{Binding GUID}" Width="Auto" VerticalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="8*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Visibility="{Binding Name_Edit_Visibility}" Margin="5" Orientation="Horizontal">
                    <TextBox Text="{Binding Name, Mode=TwoWay}"></TextBox>
                    <Button Tapped="Files_Grid_Row_Edit_Name_OK_Tapped">OK</Button>
                    <Button Tapped="Files_Grid_Row_Edit_Name_Cancel_Tapped">Cancel</Button>
                </StackPanel>
                <TextBlock Grid.Column="0" Text="{Binding LatestVersion.Name}" Margin="5"></TextBlock>
                <TextBlock Grid.Column="1" Text="{Binding LatestVersion.WordCount}" HorizontalAlignment="Right" Margin="5"></TextBlock>
                <TextBlock Grid.Column="2" Text="{Binding Created}" Margin="5" HorizontalAlignment="Right"></TextBlock>
                <TextBlock Grid.Column="3" Text="{Binding LatestVersion.Updated}" Margin="5" HorizontalAlignment="Right"></TextBlock>
                <TextBlock Grid.Column="4" Text="{Binding LatestVersion.VersionNumber}" Margin="5" HorizontalAlignment="Right"></TextBlock>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel HorizontalAlignment="Left" VerticalAlignment="Stretch" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment"  Value="Stretch" />
            <Setter Property="VerticalContentAlignment"  Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
        </Style>
    </GridView.ItemContainerStyle>
</GridView>

As you can see I've tried setting VerticalAlignment and VerticalContentAlignment to stretch just about everywhere I can think of, but each row of the resulting gridview has slightly different column widths.

How to I make each GridView row have the same width columns, without actually setting a fixed width?

Upvotes: 0

Views: 720

Answers (1)

user3346310
user3346310

Reputation:

I am not quite sure i do understand your problem, are you trying to align content of columns? if so try stretching textboxes are you trying to align header Grid with GridView content? if so try adding header data into GridView along with GridView data

Upvotes: 1

Related Questions