如何直接在 XAML 中将 ResourceDictionary 的值与 IValueConverter 绑定？

Question

我想在作为主题的 ResourceDictionary 中绑定一个值。

我在https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming/theming 中学习了一些教程

这是名为 Black.xaml 的 ResourceDictionary 的代码：

<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test.Themes.Black">
    <Color x:Key="PrimaryBackground" x:FactoryMethod="FromHex">
        <x:Arguments>
            <x:String>#101010</x:String>
        </x:Arguments>
    </Color>    
</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"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Test.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Themes/Black.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

这里是 ContentView：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:Test.Views"
             xmlns:VM="clr-namespace:Test.ViewModels"             
             mc:Ignorable="d"             
             x:Class="Test.Views.MainView">
    <ContentView.BindingContext>
        <VM:MainViewVM></VM:MainViewVM>
    </ContentView.BindingContext>    
    <ContentView.Content>
        <Grid BackgroundColor="">            
        </Grid>
    </ContentView.Content>
</ContentView>

现在我想将上面 Grid 的 BackgroundColor 属性绑定到 ResourceDictionary 的值 PrimaryBackground。

我怎样才能实现它？谢谢。

Answer 1

只需使用DynamicResource 设置BackgroundColor，如下代码所示

<Grid BackgroundColor="{DynamicResource PrimaryBackground}">
            <Label Text="Face-Palm Monkey"
                   VerticalOptions="Center"
                   Margin="15"/>

</Grid>

这是运行截图。

我建议您将ResourceDictionary 直接设置为App.xaml，如下格式。

<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MVVMWebView.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="PrimaryBackground" x:FactoryMethod="FromHex">
                <x:Arguments>
                    <x:String>#101010</x:String>
                </x:Arguments>
            </Color>

        </ResourceDictionary>
    </Application.Resources>
</Application>

如果您想使用IValueConverter，只需在ContentPage.Resources 中添加Converter，就像跟随代码一样。 IValueConverter用Converter标签，你用StaticResource，和DynamicResource不冲突

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataBindingDemos"
             x:Class="DataBindingDemos.EnableButtonsPage"
             Title="Enable Buttons">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:IntToBoolConverter x:Key="intToBool" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Padding="10, 0">


        <Button Text="Search"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                IsEnabled="{Binding Source={x:Reference entry1},
                                    Path=Text.Length,
                                    Converter={StaticResource intToBool}}" />
     </StackLayout>
   </ContentPage>

==========更新==============

我根据您的需要进行转换。我用Button 来转换白天和黑夜。这里正在运行 GIF。

 <ContentPage.Resources>
        <ResourceDictionary>
            <controls:ColorBoolConverter x:Key="intToBool" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout>

        <Button Text="Submit"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Command="{Binding ChangeCommand}"
                />

        <!-- Place new controls here -->
        <Grid BackgroundColor="{Binding IsDark, Converter={StaticResource intToBool}}">
            <Label Text="Face-Palm Monkey"
                       VerticalOptions="Center"
                       Margin="15"
                        />

        </Grid>
    </StackLayout>

这是关于布局的背景代码。

  public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = new MyViewModel();
        }
    }

这是转换器代码。

    public class ColorBoolConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is bool)
            {
                if ((Boolean)value)
                    return Color.FromHex("#101010");
                else
                    return Color.White;
            }
            return Color.White;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

这里是测试MyViewModel.cs

    public class MyViewModel: INotifyPropertyChanged
    {
        public ICommand ChangeCommand { protected set; get; }
        bool _isDark = false;
        public bool IsDark
        {
            get
            {
                return _isDark;
            }

            set
            {
                if (_isDark != value)
                {
                    _isDark = value;
                    OnPropertyChanged("IsDark");

                }
            }

        }




        public MyViewModel()
        {
            ChangeCommand =  new Command(() =>
            {

                IsDark = !IsDark;


            });
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}