UWP:如何在ResourceDictionary中使用x:bind?

时间:2017-12-30 01:22:07

标签: uwp resourcedictionary xbind

我想在UWP中使用ResourceDictionary,就像我在WPF中使用的那样 在WPF中,我在ResourceDictionary文件(* Style.xaml)

中执行此操作
<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:models="using:NWP.Models">

<Style x:key="MenuContent" TargetType="ContentControl">
    <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ContentControl">
            <controls:DockPanel>
                <ItemsControl ItemsSource="{x:Bind How-Can-I-Bind-Collection-Here?}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="models:MenuItemModel">
                            <RadioButton GroupName="MenuItems" IsChecked="{x:Binding IsChecked, Mode=TwoWay}" MinHeight="0" MinWidth="0" Command="{Binding Command}" CommandParameter="{Binding}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>

                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </controls:DockPanel>
        </ControlTemplate>
    </Setter.Value>
</Style>

</ResourceDictionary>

然后我可以在我的页面中使用这种风格:

<ContentControl Style="{StaticResource MenuContent}">
    <StackPanel Orientation="Vertical">
        <TextBox/>
        <PasswordBox/>
        <Button Content="Login"/>
    </StackPanel>
</ContentControl>

但是现在,我在如何使用x:bind:

在ResourceDictionary的ItemsControl中为ItemsSource提供源代码方面很困难
<ItemsControl ItemsSource="{x:Bind How-Can-I-Bind-Collection-Here?}">

我的问题是,如何解决这个问题?

1 个答案:

答案 0 :(得分:3)

加入@Bite的建议,我需要为您解释更多信息。在该文件中,它说:

  

如果在资源字典中使用{x:Bind},则资源字典需要具有代码隐藏类。

  1. 从文档页面,听起来它可以工作,使用支持类作为绑定源,就像任何其他x:Bind一样,但编译器明确拒绝任何 x:在样式中绑定。它根本不受支持。因此,您不能在样式中使用x:Bind,甚至不能在样式中定义的DataTemplate中使用。
  2. 为了使用x:从一个定义的DataTemplate中绑定 在ResourceDictionary中,您需要为它创建一个类后面的代码。 此模板必须仍然在任何样式之外,因为第1点,但您需要x的支持类:绑定从 的ResourceDictionary。
  3. 要使项目源绑定生效,使用基于ResourceDictionary的方法,您需要使用遗留{Binding}而不是{x:Bind}。
  4. 由于我们必须使用legacy {Binding}来使其工作,因此必须通过设置和/或调整ContentControl的DataContext来自定义项源。
  5. 然后,我做了一个简单的代码示例供您参考:

    <ResourceDictionary
    x:Class="AppStyle.MenuDictionary"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppStyle"
    xmlns:System="using:System">
    
    <Style x:Key="MenuContent" TargetType="ContentControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <ItemsControl ItemsSource="{Binding MenuItems}" ItemTemplate="{StaticResource MenuItemDataTemplate}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                        <ContentPresenter Grid.Row="1" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <DataTemplate x:Key="MenuItemDataTemplate" x:DataType="System:String">
        <RadioButton GroupName="MenuItems" MinHeight="0" MinWidth="0" Content="{x:Bind}" />
    </DataTemplate>
    

    public sealed partial class MenuDictionary : ResourceDictionary
    {
        public MenuDictionary()
        {
            this.InitializeComponent();
        }
    }
    
    <Page
    x:Class="AppStyle.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppStyle"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <local:MenuDictionary/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ContentControl Style="{StaticResource MenuContent}">
            <StackPanel>
                <TextBlock>Test</TextBlock>
                <TextBox />
            </StackPanel>
        </ContentControl>
    </Grid>
    

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.DataContext = this;
        }
        public IEnumerable<string> MenuItems => new string[] { "Page Item 1", "Page Item 2", };
    }