按钮在带有 DataTemplates 的 FlipView 中不起作用 - WinRT

Button doesn't work in FlipView with DataTemplates - WinRT

我正在使用 Flipview 和 DataTemplateSelector 在运行时确定应用哪个 DataTemplate 来显示我的控件中的项目。

我有两个 DataTemplate,一个是静态的,第二个可用于不确定数量的项目。

问题是按钮什么都不做。我在 SaveCommand 中使用了一个断点,但是当我点击按钮时,它并没有中断。

XAML

<Page.Resources>
    <DataTemplate x:Key="FirstDataTemplate">
        <Grid>
            <TextBlock Text="{Binding Content}" Margin="10,0,18,18"></TextBlock>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="SecondDataTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" Text="{Binding Url}"></TextBox>
            <Button Grid.Column="1" Name="SendButton" 
                Style="{StaticResource ImageButtonStyle}" 
                Command="{Binding Path=SaveCommand}"
                HorizontalAlignment="Center">
                <Grid>
                    <Image Source="ms-appx:///Skins/Images/buton.png" Stretch="None" />
                    <TextBlock Text="CLICK ME" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
                </Grid>
            </Button>
        </Grid>
    </DataTemplate>
    <local:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
        FirstTextTemplate="{StaticResource FirstDataTemplate}"
    SecondTextTemplate="{StaticResource SecondDataTemplate}">
    </local:MyDataTemplateSelector>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <FlipView x:Name="itemGridView" ItemTemplateSelector="{StaticResource MyDataTemplateSelector}" 
        Margin="265,220,284,162">
    </FlipView>
</Grid>

代码隐藏

public sealed partial class FlipViewDemo : Page
{
    public FlipViewDemo()
    {
        this.InitializeComponent();

        var items = new List<BaseClass>();

        items.Add(new FirstItem
        {
            Content="This is a test - Content"
        });

        for (int i = 0; i < 18; i++)
        {
            items.Add(new SecondItem
            {
                Url = "http://www.google.com/ " + i.ToString() 
            });
        }
        itemGridView.ItemsSource = items;
    }
}

public class BaseClass
{

}

public class FirstItem : BaseClass
{
    public string Content { get; set; }
}

public class SecondItem : BaseClass
{
    public string Url { get; set; }
}

public class MyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate FirstTextTemplate { get; set; }
    public DataTemplate SecondTextTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        if (item is FirstItem)
            return FirstTextTemplate;
        if (item is SecondItem)
            return SecondTextTemplate;

        return base.SelectTemplateCore(item, container);
    }
}

ViewModel

public class FisaObsViewModel : ViewModelBase
{
    private RelayCommand saveCommand;

    public FisaObsViewModel()
    {

    }

    public RelayCommand SaveCommand
    {
        get
        {
            return saveCommand ?? (saveCommand = new RelayCommand(
                async () =>
                {
                    try
                    {
                        MessageDialog dlg = new MessageDialog("Message");
                        await dlg.ShowAsync();
                    }
                    catch (Exception)
                    {
                        throw;
                    }
                }));
        }
    }
}

我检查过的一些链接:

http://www.mutzl.com/tag/mvvm-light/

http://www.codeproject.com/Articles/126249/MVVM-Pattern-in-WPF-A-Simple-Tutorial-for-Absolute

http://social.technet.microsoft.com/wiki/contents/articles/18199.event-handling-in-an-mvvm-wpf-application.aspx

问题是 DataTemplate 引用的是您的 Model,而不是您的 ViewModel。所以你的命令绑定试图在 Model.

上找到命令

您需要将绑定源更改为 DataContext 设置为 ViewModel 的任何元素。

{Binding DataContext.SaveCommand, RelativeSource={RelativeSource AncestorType=Page}}

给你的 Page 一个 Name,并使用以下绑定:

{Binding DataContext.SaveCommand, ElementName=myPageName}