How do we add background and specify its selected color to a view cell for UWP platform on Xamarin forms

Question

I would like to change the selection color of a listview on uwp.

As I am new to uwp I did some reading and I think the way to go about doing this is to declare a custom renderer and in it specify the style

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"];
        }
    }

And add the following to my 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>

by doing so I was able to change the background color of my listview, however my real goal was to change the selected color of the listview and not its background color.

After experimenting I think the so called view cell(Xamarin forms term) for the UWP listview is actually represented by the itemspresenter portion in the app.xaml code. But this itemspresenter does not have any background color property and I am also not sure how to go about doing this. I even tried playing with the visual states but to no avail.

Any kind soul able to help me out with this?

score 1 · Accepted Answer · answered Apr 18 '18 at 07:26

This idea derived from this case. If you want modify the listview item select color within UWP, you could modify ListViewItem style like the above case. I tried, but failed. Because Xamarin.Forms uses a specific ListViewItem style. They call it FormsListViewItem. So I overrided FormsListViewItem and modify SelectedBackground value in the App.xaml. It works.

<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>

How do we add background and specify its selected color to a view cell for UWP platform on Xamarin forms

1 Answers1