C#•2mo ago

ListView column help (How to autosize, align content and add column lines?)

This is my current GUI (Using ModernWpf), I've done a lot of Googling and I can't seem to find a way to do the following: 1) Vertically align the text in the 'Name' column to be centered 2) Horizontally align the ComboBox in the 'Voice' column to be centered 3) Make the ComboBoxes to automatically have the size of the longest option 4) Add vertical line separators between the columns all the way down And here is one of the ListViews as an example (they're both identical just different ItemSources)

<ListView x:Name="ChatterListView" Grid.Row="1" ItemsSource="{Binding Source={StaticResource ChattersSort}}" HorizontalAlignment="Stretch">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name" Width="Auto" DisplayMemberBinding="{Binding Username}"/>

            <GridViewColumn Header="Voice" Width="Auto">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Grid>
                            <ComboBox ItemsSource="{Binding DataContext.Voices, RelativeSource={RelativeSource AncestorType=Window}}"
                                      SelectedItem="{Binding Voice, Mode=TwoWay}"
                                      DisplayMemberPath="Name" Width="Auto" />
                        </Grid>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>

            <GridViewColumn Header="Enabled" Width="75">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <CheckBox IsChecked="{Binding TTSEnabled, Mode=TwoWay}" Unchecked="ChatterCheckBox_Unchecked" Checked="ChatterCheckBox_Checked"/>
                        </StackPanel>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

<ListView x:Name="ChatterListView" Grid.Row="1" ItemsSource="{Binding Source={StaticResource ChattersSort}}" HorizontalAlignment="Stretch">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name" Width="Auto" DisplayMemberBinding="{Binding Username}"/>

            <GridViewColumn Header="Voice" Width="Auto">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Grid>
                            <ComboBox ItemsSource="{Binding DataContext.Voices, RelativeSource={RelativeSource AncestorType=Window}}"
                                      SelectedItem="{Binding Voice, Mode=TwoWay}"
                                      DisplayMemberPath="Name" Width="Auto" />
                        </Grid>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>

            <GridViewColumn Header="Enabled" Width="75">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <CheckBox IsChecked="{Binding TTSEnabled, Mode=TwoWay}" Unchecked="ChatterCheckBox_Unchecked" Checked="ChatterCheckBox_Checked"/>
                        </StackPanel>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

1 Reply

kaze•2mo ago

1. You can use vertical alignment prop for the column and set it to 'center' 2. Use horizontal alignment for the column and set to 'center' 3. Play around with the width of the combo box. As it is set to 'auto' currently the control will take the width of the contents by default. Try setting up a min width prop to it.

Gaming

Programming

ListView column help (How to autosize, align content and add column lines?)