如何使用 MVVM 将数据正确绑定到 WPF 按钮答案

【问题标题】：How to bind data correctly to a WPF button using MVVM如何使用 MVVM 将数据正确绑定到 WPF 按钮
【发布时间】：2012-06-26 05:00:54
【问题描述】：

这是我的设置，看来我没有正确绑定数据。结果应该是一个显示图像和文本的按钮。什么都没有显示。

<UserControl x:Class="AmebaPrototype.UI.LandingPivot.featureControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="330" d:DesignWidth="960"
         DataContext="{Binding Source={StaticResource viewModelLocator}, Path=VideoViewModel}"
         >
<UserControl.Resources >
    <DataTemplate x:Key="custTemplate" >
        <StackPanel >
            <Image Source="{Binding ImagePath}"/>
            <TextBlock Text="{Binding MyTitle}"/>
        </StackPanel>          
    </DataTemplate>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="{x:Null}" >
    <Button Content="Button" Height="316" 
            HorizontalAlignment="Left" Margin="12,2,0,0" 
            Name="button1" VerticalAlignment="Top" 
            Width="423" Click="button1_Click" 
            ContentTemplate="{DynamicResource custTemplate}"
            />
    <Button Content="Button" Height="156" HorizontalAlignment="Left" Margin="441,2,0,0" Name="button2" VerticalAlignment="Top" Width="208" Click="button2_Click" />
    <Button Content="Button" Height="156" HorizontalAlignment="Left" Margin="669,2,0,0" Name="button3" VerticalAlignment="Top" Width="208" />
    <Button Content="Button" Height="156" HorizontalAlignment="Left" Margin="441,162,0,0" Name="button4" VerticalAlignment="Top" Width="208" />
    <Button Content="Button" Height="156" HorizontalAlignment="Left" Margin="669,162,0,0" Name="button5" VerticalAlignment="Top" Width="208" />
</Grid>

型号：

public class Video
    {
        public string  MyTitle { get; set; }
        public string ImagePath { get; set; }
    }

视图模型

  public ViewModel VideoViewModel 
    {
        get 
        {
            if(viewmodel == null)
            {
                viewmodel = new ViewModel();
                viewmodel.ListData.Clear();
                viewmodel.ListData.Add(new Video { MyTitle = "Title1", ImagePath = "exampleimage.com/image.png" });
                 viewmodel.ListData.Add(new Video { MyTitle = "Title2", ImagePath = "exampleimage.com/image.png" });

            }

            return viewmodel;
        }
    }

【问题讨论】：

您的VideoViewModel 看起来如何？因为在UserControl 的DataContext 中，你绑定到VideoViewModel，它不是Video 类本身，而是包含（我猜）一个类型为Video 的属性。
检查此链接以使用 MVVM 与按钮绑定：stackoverflow.com/questions/3772797/…
运行程序时，请查看 Visual Studio 中的“输出”面板。是否有任何 BindingExpression 错误？
@nemesv 我刚刚用 ViewModel 更新了代码
@GregSansom 没有没有错误

标签： c# wpf mvvm

【解决方案1】：

如果您真的想使用 DataTemplate 执行此操作，那么：

<Button>
        <Button.Content>
            <x:Type TypeName="Visual"/>
        </Button.Content>
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <ContentPresenter ContentSource="Content"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
        <Button.ContentTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Path=Name}"/>
            </DataTemplate>
        </Button.ContentTemplate>
    </Button>

您的 ViewModel 绑定应该可以在此处使用，因此您可以在 DataTemplate 中对其进行调整以包含您的 Image 和 TextBlock。

【讨论】：

什么是 x ？参考。试过了，它不允许我为 x:Type 设置它。

【解决方案2】：

资源中的数据模板：

<DataTemplate x:Key="bTemplate">
        <Button Label="{Binding MyTitle}" 
                Command="{Binding Execute}"> 
           <Image Source="{Binding ImagePath}"   />
        </Button>
 </DataTemplate>

与您的问题不完全一样，但您可以使用带有 ItemSource 的控件，例如 ListView：

<ListView 
  ItemsSource="{Binding ListData}"  
  ItemTemplate="{StaticResource bTemplate}" 
>
</ListView>

我添加了一个 Command ，因为如果你想实现 MVVM 而不是事件点击，这是必要的。

【讨论】：

我之前用ListView和ListBox实现过，现在只需要专门实现一个Button。即没有 ListView 或其他布局。