将数据绑定到Panorama.TitleTemplate

Question

我一直在尝试通过使用Panorama.TitleTemplate属性和一个用于绑定数据的字典来自定义全景页面的标题区域，但没有成功。我的XAML代码如下：

<Grid x:Name="LayoutRoot">
    <controls:Panorama Name="siteHubPanoramaControl">
        <controls:Panorama.TitleTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Height="75" Margin="0,75,0,0" Width="470" DataContext="{Binding}">
                    <Image Source="{Binding imageSource}" />
                    <TextBlock Text="{Binding name}" />
                </StackPanel>
            </DataTemplate>
        </controls:Panorama.TitleTemplate>

        <!--Panorama item one-->
        <controls:PanoramaItem Header="Site Info">
            <Grid/>
        </controls:PanoramaItem>

        <!--Panorama item two-->
        <controls:PanoramaItem Header="Others">
            <Grid/>
        </controls:PanoramaItem>
    </controls:Panorama>
</Grid>

我使用以下代码将字典绑定到数据模板：

Dictionary<string, string> dictionary = new Dictionary<string, string>();
dictionary.Add("name", this.name);
dictionary.Add("imageSource", "http://...");

siteHubPanoramaControl.DataContext = dictionary;

我一直在寻找解决方案，但找不到。如果你能在这个问题上帮助我，我将很高兴。

另外，有没有很好的资料可以学习数据绑定？

先谢谢你...

Answer 1

name和imageSource都不是属性。它只是你字典里的关键字。因此，当您尝试绑定这两个名称时，它找不到任何具有这些名称的属性。

您必须将这些值公开到一个属性中。例如,

public string Name
{
    get { return dictionary["name"]; }
}

我不确定有没有其他方法，但那将是我的想法。我想应该行得通。

编辑：

好的，假设你使用的是MVVM模式，下面的代码应该可以工作。

ViewModel

    public class MainPageViewModel
    {
        private Dictionary<string,string> _dictionary = new Dictionary<string, string>();

        public MainPageViewModel()
        {
            _dictionary.Add("name", "Foo");
            _dictionary.Add("imageSource", "http://");
        }

        public string Name
        {
            get { return _dictionary["name"]; }
        }

        public string ImageSource
        {
            get { return _dictionary["imageSource"]; }
        }
    }

代码隐藏

public partial class MainPage : PhoneApplicationPage
{
    private MainPageViewModel _vm;
    // Constructor
    public MainPage()
    {
        InitializeComponent();

        _vm = new MainPageViewModel();
        DataContext = _vm;
    }
}

XAML

<Grid x:Name="LayoutRoot">
    <phone:Panorama Name="siteHubPanoramaControl">
        <phone:Panorama.Title>
            <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding ImageSource}"/>
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
        </phone:Panorama.Title>
        <!--Panorama item one-->
        <phone:PanoramaItem Header="Foo">
            <Grid/>
        </phone:PanoramaItem>

        <!--Panorama item two-->
        <phone:PanoramaItem Header="Others">
            <Grid/>
        </phone:PanoramaItem>
    </phone:Panorama>
</Grid>

对于XAML，不使用Panorama.TitleTemplate和应用DataTemplate，而是使用Panorama.Title，这使得它更容易。我试过用TitleTemplate，我只能让它绑定标题，而不是图像。因此，最简单的解决方法是使用Panorama.Title。