UWP: как стилизовать мой ListBoxItem и добавить несколько триггеров - PullRequest
Новая
       12

UWP: как стилизовать мой ListBoxItem и добавить несколько триггеров

0 голосов
/ 13 января 2019

У меня есть Style: 

<Style TargetType="ListBoxItem">
        <Setter Property="Padding" Value="8"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                            <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                                <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
                                    <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

И я хочу добавить некоторые цвета, измененные для Mouse Over и Selected, и я очень запутан в сравнении с WPF триггерами.

1 Ответ

0 голосов
/ 13 января 2019

ListBox устарел, вместо этого используйте ListView с вертикальной или горизонтальной ориентацией макета.

Чтобы изменить базовую панель, вы должны добавить узел в вашем списке, например, 

<ListView>
<ListView.ItemsPanel>
  <ItemsPanelTemplate>
     <StackPanel Orientation="Horizontal" /><!-- Or vertical-->
   </ItemsPanelTemplate>
</ListView.ItemsPanel>
</Listview

Это самый быстрый способ редактирования стиля фактического контейнера, который оборачивается вокруг каждого элемента в ListView (он называется ListViewItem): 

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

Что касается другой части вашего вопроса, касающейся триггеров, триггеров и особенно пользовательских триггеров, и их использование - это как раз то, что нужно для uwp, чтобы добиться такой функциональности, как изменение цвета в зависимости от состояния указателя, вы это можно сделать очень просто, отредактировав таблицу стилей по умолчанию, просмотр списка довольно сложен с точки зрения стиля, но вам нужно только отредактировать стиль ListViewItem по умолчанию, то же самое, что я говорил выше, на этот раз это будет полное погружение. в его стиль.

Стиль ListViewItem удобно найти здесь

https://msdn.microsoft.com/en-us/library/windows/apps/mt299136.aspx

Похоже на это 

<!-- Default style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<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="Template">
  <Setter.Value>
    <ControlTemplate TargetType="ListViewItem">
      <ListViewItemPresenter
          ContentTransitions="{TemplateBinding ContentTransitions}"
          SelectionCheckMarkVisualEnabled="True"
          CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
          DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
          FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
          FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
          PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
          PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"
          SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
          PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
          SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
          DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
          DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
          ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
          ContentMargin="{TemplateBinding Padding}"
          CheckMode="Inline"/>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>

В вашем случае все, что вам нужно сделать, это изменить значения фона PointerOver и PointerOverSelected, после этого дать значение x: Key вашему листу и сослаться на него следующим образом: 

<ListView ItemContainerStyle={StaticResource YourKey}
...