UWP-CPP/Winrt 使 ListViewItem 数据模板的行控件仅在选中时可见

Question

我打算使用 ListView 显示对象列表。根据设计，当一个项目被选中时，项目的内容中应该出现一条蓝线。我已经编写了以下代码，并尝试在如下定义的 ListViewItem 的 Style 中将可见性更改为可见（在第二个代码片段中搜索 ----------Setting visibility Here）。但这样做是抛出错误。 And I am not able to access the BlueLine object in the code behind when an ListViewItem is selected.您能否帮助实现这一目标。 TIA

                <ListView
                    x:Name="ObjectList"
                    ItemsSource="{x:Bind ObjectViewModel.Objects}"
                    SelectionChanged="ListViewButtonClick"
                    MaxWidth ="{StaticResource ColumnMaximumWidth}"
                    VerticalAlignment = "Center"
                    HorizontalContentAlignment = "Stretch"
                    ScrollViewer.HorizontalScrollBarVisibility ="Disabled"
                    SelectionMode ="Single" />

                    <ListView.Resources>
                        <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Green" />
                        <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Green" />
                    </ListView.Resources>

                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Margin" Value="0,0,0,30" />
                        </Style>
                    </ListView.ItemContainerStyle>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="local:ObjectModel">
                                <Grid MinHeight="66" CornerRadius="8">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto" />
                                        <ColumnDefinition Width="auto" />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <Line
                                        x:Name="BlueLine"
                                        Stroke="Blue"
                                        StrokeThickness="4"
                                        Visibility="Collapsed"
                                        X1="0"
                                        X2="0"
                                        Y1="0"
                                        Y2="60" />
                                    <FontIcon
                                        Grid.Column="1"
                                        FontSize="17"
                                        Glyph="&#xE720;"
                                        Style="{StaticResource FontIconStyle1}" />
                                    <TextBlock
                                        Grid.Column="2"
                                        Style="{StaticResource AddBluetoothLabelTextStyle}"
                                        Text="{x:Bind ObjectName, Mode=OneWay}" />
                                </Grid>
                    </ItemsControl.ItemTemplate>
                </ListView>

<Style TargetType="ListViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
                <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="IsHoldingEnabled" Value="True" />
                <Setter Property="Padding" Value="12,0,12,0" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
                <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
                <Setter Property="AllowDrop" Value="False" />
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                <Setter Property="FocusVisualMargin" Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter
                                x:Name="Root"
                                Margin="0,0,0,30"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                                CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                                CheckMode="{ThemeResource ListViewItemCheckMode}"
                                ContentMargin="{TemplateBinding Padding}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                Control.IsTemplateFocusTarget="True"
                                CornerRadius="4"
                                DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                                DragBackground="{ThemeResource ListViewItemDragBackground}"
                                DragForeground="{ThemeResource ListViewItemDragForeground}"
                                DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                                FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                                FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                                FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                                PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                                PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                                PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                                PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                                ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                                RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
                                RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                                SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                                SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                                SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                                SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                                SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Selected">  ----------Setting visibility Here
                                            <VisualState.Setters>
                                                <Setter Target="BlueLine.Visibility" Value="Visible" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PointerOverSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PressedSelected">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                            </VisualState.Setters>
                                        </VisualState>

                                    </VisualStateGroup>

                                    <VisualStateGroup x:Name="DisabledStates">
                                        <VisualState x:Name="Enabled" />

                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="Root.RevealBorderThickness" Value="0" />
                                            </VisualState.Setters>
                                        </VisualState>

                                    </VisualStateGroup>

                                </VisualStateManager.VisualStateGroups>
                            </ListViewItemPresenter>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Answer 1

当使用 VisualTreeHelper class.

选择 ListViewItem 时，可以使用一种方法在代码隐藏中访问 BlueLine object

请检查以下代码：

添加 headers 和命名空间：

#include <winrt/Windows.UI.Xaml.Shapes.h>
#include <winrt/Windows.UI.Xaml.Media.h>

using namespace winrt::Windows::UI::Xaml::Shapes;
using namespace Windows::UI::Xaml::Media;

在.h文件中添加私有成员：

private:
    Line previousLine{ nullptr };

在后面的代码中访问 BlueLine object：

void winrt::ListViewStyle::implementation::MainPage::ObjectList_SelectionChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::SelectionChangedEventArgs const& e)
{
    if (previousLine != nullptr)
    {
        previousLine.Visibility(Visibility::Collapsed);
    }
    auto selectedItemContainer = ObjectList().ContainerFromItem(ObjectList().SelectedItem());
    auto presenter = VisualTreeHelper::GetChild(selectedItemContainer.try_as<DependencyObject>(), 0);
    auto grid = VisualTreeHelper::GetChild(presenter, 0);
    auto line = VisualTreeHelper::GetChild(grid, 0).try_as<Line>();
    line.Visibility(Visibility::Visible);
    previousLine = line;
}

UWP-CPP/Winrt 使 ListViewItem 数据模板的行控件仅在选中时可见

UWP-CPP/Winrt Make a Line Control of the ListViewItem Data Template only visible when selected

xaml

listview

uwp

uwp-xaml

c++-winrt