我们如何在Xamarin表单上为UWP平台的视图单元格添加背景并指定其选定的颜色

时间:2018-04-17 06:11:19

标签: xamarin.forms uwp

我想在uwp上更改listview的选择颜色。

由于我是uwp的新手,我做了一些阅读,我认为这样做的方法是声明一个自定义渲染器并在其中指定样式

public class MyListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            if (Control != null) Control.Style = (Windows.UI.Xaml.Style)App.Current.Resources["Listviewstyle"];
        }
    }

并将以下内容添加到我的app.xaml

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListView">
                        <Border x:Name="grid"
                                Background="YellowGreen"
                                Padding="{TemplateBinding Margin}">
                            <ScrollViewer x:Name="ScrollViewer"
                                          TabNavigation="{TemplateBinding TabNavigation}"
                                          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                          IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                          IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                          IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                          IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                          ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                          IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                          BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                          AutomationProperties.AccessibilityView="Raw"
                                          Background="BlueViolet">

                                <ItemsPresenter   
                                    Header="{TemplateBinding Header}"
                                    HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                    HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                    Footer="{TemplateBinding Footer}"
                                    FooterTemplate="{TemplateBinding FooterTemplate}"
                                    FooterTransitions="{TemplateBinding FooterTransitions}"
                                    Padding="{TemplateBinding Padding}" />
                                </ScrollViewer>
                                <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid"
                                                                           Storyboard.TargetProperty="Opacity">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="0.5" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectedState">
                                    <VisualState x:Name="Selected">
                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="borderSelected"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid"
                                                                           Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ScrollViewer"
                                                                           Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="5000"
                                                                        Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unselected">
                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="borderSelected"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid"
                                                                           Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ScrollViewer"
                                                                           Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
通过这样做,我能够改变列表视图的背景颜色,但我的真正目标是更改列表视图的选定颜色而不是其背景颜色。

在试验之后,我认为UWP列表视图的所谓视图单元(Xamarin形式术语)实际上由app.xaml代码中的itemspresenter部分表示。但是这个itemspresenter没有任何背景颜色属性,我也不知道该怎么做。我甚至试过玩视觉状态,但无济于事。

任何善良的人都能帮助我解决这个问题?

1 个答案:

答案 0 :(得分:1)

这个想法来自this case。如果要在UWP中修改listview项目选择颜色,可以像上面的情况一样修改ListViewItem样式。我试过了,但都失败了。因为Xamarin.Forms使用特定的ListViewItem样式。他们称之为 FormsListViewItem。所以我覆盖了FormsListViewItem并修改了App.xaml中的SelectedBackground值。它有效。

<Application.Resources>
    <ResourceDictionary>
        <Style x:Key="FormsListViewItem" 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="0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
            <Setter Property="MinHeight" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <ListViewItemPresenter
                    CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                    ContentMargin="{TemplateBinding Padding}"
                    CheckMode="Inline"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                    FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
                    FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
                    PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                    PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
                    ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                    SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
                    SelectionCheckMarkVisualEnabled="True"
                    SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
                    SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
                    SelectedBackground="Red"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Application.Resources>

enter image description here