尝试了解 UWP 数据绑定

Question

所以，我做了一个非常简单的尝试，尝试从我拥有的类的属性中进行数据绑定，但是，无论出于何种原因，代码实际上做了任何事情。它没有抛出任何错误，但某些东西一定不能正常工作。我目前只是在测试它是否会像我想要的那样运行，在这种情况下，它将把矩形的不透明度设置为零。这是似乎不想正确响应的数据模板的 xaml：

        <HubSection x:Name="China" Width="440" Height="460" Background="#FF343434" Header="China" IsHeaderInteractive="True" Tapped="{x:Bind HubSectionTapped}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="50,0,0,0">
            <DataTemplate x:DataType="data:MainPageView">
                <Grid Height="460" Width="410" VerticalAlignment="Bottom" x:Name="ChinaBackground">
                    <Image Source="Assets/chinaFlag.bmp" x:Name="ChinaFlag"/>
                    <Rectangle x:Name="ChinaSelected_Rect" Width="410" Height="30" VerticalAlignment="Bottom" Fill="BlueViolet" Opacity="{x:Bind Opacity1}"/>
                </Grid>
            </DataTemplate>
        </HubSection>

下面是代码：

    public MainPageView TheMainPageView;

    public MainPage()
    {

        this.InitializeComponent();
        timer = new DispatcherTimer();
        timer.Tick += Timer_DyanmicResize;
        timer.Tick += Timer_SelectionIndicator;
        timer.Start();

        TheMainPageView = new MainPageView ();
    }

最后，这里是引用的 MainPageView 类：

public class MainPageView
{
    public int Opacity1 {get; set;}
    public int Opacity2 {get;set;}
    public int Opacity3 { get; set; }

    public MainPageView()
    {
        this.Opacity1 = 0;
        this.Opacity2 = 0;
        this.Opacity3 = 0;
    }
}

在 XAML 中，我包含了 xmlns:data="using:TestApp.Models"（models 是 MainPageView 所在的文件夹）。正如我所说，它没有抛出错误，但它也没有做任何事情，所以我有点不知道从哪里开始解决这个问题，因为没有任何错误可以追溯。提前感谢你们提供的任何帮助

Answer 1

HubSection 使用DataTemplate 定义部分的内容，内容可以内联定义，或绑定到数据源。在这个DataTemplate中使用绑定时，我们需要设置HubSection的DataContext属性为DataTemplate提供数据源。

{x:Bind} 不使用 DataContext 作为默认源，而是使用页面或用户控件本身。因此，它将在您的页面或用户控件的代码隐藏中查找属性、字段和方法。

当您直接在页面或用户控件中使用{x:Bind} 时，这是正确的。而在 DataTemplate 内部，有一点不同。

在 DataTemplate 内部（无论用作项目模板、内容模板还是标题模板），Path 的值不会在上下文中解释页面，但在被模板化的数据对象的上下文中。为了在编译时验证其绑定（并为它们生成有效的代码），DataTemplate 需要使用 x:DataType 声明其数据对象的类型。

有关 UWP 中数据绑定的更多信息，请查看Data binding in depth。

要解决您的问题，您只需在HubSection 中设置DataContext，如下所示：

<HubSection x:Name="China" Width="440" Height="460" Background="#FF343434" Header="China" IsHeaderInteractive="True" Tapped="{x:Bind HubSectionTapped}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="50,0,0,0" DataContext="{x:Bind TheMainPageView}">
    <DataTemplate x:DataType="data:MainPageView">
        <Grid Height="460" Width="410" VerticalAlignment="Bottom" x:Name="ChinaBackground">
            <Image Source="Assets/chinaFlag.bmp" x:Name="ChinaFlag"/>
            <Rectangle x:Name="ChinaSelected_Rect" Width="410" Height="30" VerticalAlignment="Bottom" Fill="BlueViolet" Opacity="{x:Bind Opacity1}"/>
        </Grid>
    </DataTemplate>
</HubSection>

这里在HubSection 中使用{x:Bind} 时，它使用页面本身作为其数据源，因为HubSection 直接在页面中。所以它可以在代码隐藏中获取TheMainPageView 字段。但是对于DataTemplate 中的{x:Bind}，它不能像 它的数据源是被模板化的数据对象而不是页面。所以我们需要通过设置HubSection的DataContext属性来提供这个数据对象。

Answer 2

检查您的输出窗口是否有错误，但我想您可能会在其中看到绑定错误。 Opacity 是双精度，您使用的是 int，所以会出现类型转换错误。