How to get XAML Listview with full-row selection and correct theme

问题

I'm taking over some code that has a XAML Listview in it. I noticed the current Listview does not have full-row selection; that is, you cannot click anywhere in the row to select an item, but must click in the area occupied by the text. Looking this up, I tried adding a HorizontalContentAlignment="stretch" to the ItemContainerStyle, but now the items are no longer using the same theme as the rest of the dialog (ExpressionDark).

The original XAML code:

Title="SelectUser" Height="350" Width="480" WindowStartupLocation="CenterScreen" WindowStyle="None" SizeToContent="Height" ResizeMode="NoResize">
<expressionDark:ExpressionDarkTheme>
    <Border BorderBrush="DimGray" BorderThickness="2">
        <StackPanel Margin="12,12,12,12">
            <TextBlock FontSize="16" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,0,0,12">Select User</TextBlock>
                <ListView Name="listViewUsers" Height="200"  Width="400" ItemsSource="{Binding}" SelectionChanged="listViewUsers_SelectionChanged">
                <ListView.View>
            <GridView>
                <GridViewColumn Header="User Id" DisplayMemberBinding="{Binding Path=UserID}" Width="150"/>
                <GridViewColumn Header="User Name" DisplayMemberBinding="{Binding Path=UserName}" Width="250"/>
            </GridView>
        </ListView.View>
    </ListView>
            <UniformGrid Height="23" Rows="1" Columns="2" Margin="0,16,0,12" Width="Auto">
                <Button Name="buttonCancel" HorizontalAlignment="Center" Width="75" Height="23" IsCancel="True" Click="buttonCancel_Click">Cancel</Button>
                <Button Name="buttonOK" HorizontalAlignment="Center" Width="75" Height="23" IsDefault="True" Click="buttonOK_Click">OK</Button>
            </UniformGrid>
        </StackPanel>
    </Border>
</expressionDark:ExpressionDarkTheme>

But when I added the ItemContainerStyle like this:

Title="SelectUser" Height="350" Width="480" WindowStartupLocation="CenterScreen" WindowStyle="None" SizeToContent="Height" ResizeMode="NoResize">
<expressionDark:ExpressionDarkTheme>
    <Border BorderBrush="DimGray" BorderThickness="2">
        <StackPanel Margin="12,12,12,12">
            <TextBlock FontSize="16" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,0,0,12">Select User</TextBlock>
                <ListView Name="listViewUsers" Height="200"  Width="400" ItemsSource="{Binding}" SelectionChanged="listViewUsers_SelectionChanged">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.View>
            <GridView>
                <GridViewColumn Header="User Id" DisplayMemberBinding="{Binding Path=UserID}" Width="150"/>
                <GridViewColumn Header="User Name" DisplayMemberBinding="{Binding Path=UserName}" Width="250"/>
            </GridView>
        </ListView.View>
    </ListView>
            <UniformGrid Height="23" Rows="1" Columns="2" Margin="0,16,0,12" Width="Auto">
                <Button Name="buttonCancel" HorizontalAlignment="Center" Width="75" Height="23" IsCancel="True" Click="buttonCancel_Click">Cancel</Button>
                <Button Name="buttonOK" HorizontalAlignment="Center" Width="75" Height="23" IsDefault="True" Click="buttonOK_Click">OK</Button>
            </UniformGrid>
        </StackPanel>
    </Border>
</expressionDark:ExpressionDarkTheme>

I'm new to XAML, so I'm not sure what I'm doing wrong here. Do I somehow need to apply the ExpressionDark theme to the Listview items? Any help would be greatly appreciated.

回答1:

I've had the same problem. All of my controls uses ExpressionDark theme.

This is how I solved this issue:

<ListBox HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Background="Transparent">
                <!-- here is my custom content -->
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

It all started working properly after adding Background="Transparent" attribute in Grid element.

来源：https://stackoverflow.com/questions/17050826/how-to-get-xaml-listview-with-full-row-selection-and-correct-theme

标签

xaml

listview

themes