[Xamarin] CollectionView DarkMode

 

NResourceDictionary.xaml 이런식으로 따로 리소스 딕셔너리를 생성하여 관리한다.

아래는, CollectionView Cell을 커스텀 레이아웃으로 만들고, 해당 Cell의 기본 배경색상과 선택했을 때의 배경색상을 현재 스마트폰 테마에 따라 바꿔주는 코드이다.

<?xml version="1.0" encoding="utf-8"?>

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    xmlns:local="clr-namespace:NathanPicker;assembly=NathanPicker">

    <Style TargetType="{x:Type local:DFNNonIconCellLayout}">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="VisualElement.BackgroundColor"
                                    Value="{AppThemeBinding Light=#f7f7f9, Dark=Black}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="VisualElement.BackgroundColor"
                                    Value="{AppThemeBinding Light=#f7f7f9, Dark=#Black}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>


    <Style TargetType="{x:Type local:DFNIconCellLayout}">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">

                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="VisualElement.BackgroundColor"
                                    Value="{AppThemeBinding Light= White, Dark=Black}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="VisualElement.BackgroundColor"
                                    Value="{AppThemeBinding Light=#f7f7f9, Dark=#acacb0}"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

</ResourceDictionary>

 

그리고 App.xaml에 추가하면 된다.

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NathanPicker.App">
    <Application.Resources>
        <ResourceDictionary Source = "DFNPicker/DFNResourceDictionary.xaml"></ResourceDictionary>
    </Application.Resources>
</Application>

 

* 현재, 이를 C# 코드로 구현하진 못한다. (다크모드 + Selected Color 지정)

github.com/xamarin/Xamarin.Forms/issues/11341

Ability to set AppThemeBinding on Styles in code · Issue #11341 · xamarin/Xamarin.Forms

 

여러 시도를 해보았으나...

var t = new Xamarin.Forms.Xaml.AppThemeBindingExtension(); 
t.Light = lightColor; 
t.Dark = darkColor;

new Setter 
{ 
    Property = VisualElement.BackgroundColorProperty, 
    Value = selectedColor 
}

-> 이 방법도 안됨.

 

다크모드 없이 Selected Color'만' 지정해주는건 됨

dvlv.tistory.com/63

[Xamarin] CollectionView Selected Item Color