如何将模板中控件的命令绑定到我的ViewModel

时间:2009-11-17 12:29:05

标签: c# wpf data-binding command

是的,我拥有的是:

<Window x:Class="WpfGettingThingsDone.View.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    AllowsTransparency="True"
    Background="Transparent"
    WindowStyle="None"    
    Title="{Binding Title}" Height="300" Width="300">
    <Window.Resources>
        <ResourceDictionary>
            <Style x:Key="WindowBorderBackground" TargetType="{x:Type Border}">
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                            <GradientStop Color="#FF222222" Offset="0" />
                            <GradientStop Color="#FF222222" Offset="0.2" />
                            <GradientStop Color="#FFAAAAAA" Offset="0.6" />
                            <GradientStop Color="#FF222222" Offset="0.7" />
                            <GradientStop Color="#FFAAAAAA" Offset="0.9" />
                            <GradientStop Color="#FF222222" Offset="1" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="WindowHeaderedContent" TargetType="{x:Type HeaderedContentControl}">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Border 
                                Background="Black"
                                BorderBrush="Black" 
                                BorderThickness="1"
                                CornerRadius="5,5,0,0"
                                Padding="4"
                                SnapsToDevicePixels="True"
                                >
                                <DockPanel>
                                    <Button DockPanel.Dock="Right" Command="{Binding Path=CloseCommand}">X</Button>
                                    <TextBlock
                                        FontSize="14"
                                        FontWeight="Bold"
                                        Foreground="White"
                                        HorizontalAlignment="Center"
                                        Text="{TemplateBinding Content}" />
                                </DockPanel>
                            </Border>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Window.Resources>

    <Border CornerRadius="5" Style="{StaticResource WindowBorderBackground}">
        <HeaderedContentControl Header="Current Contexts" 
                                Style="{StaticResource WindowHeaderedContent}" 
                                >
        </HeaderedContentControl>
    </Border>
</Window>

基本上绘制一个具有漂亮渐变背景的窗口,使用HeaderedContentControl创建标题栏,使用HeaderTemplate将x按钮放在那里。

像这样:

alt text

但是,正如您所看到的,我已经尝试将X(关闭)按钮的命令绑定到ViewModel中的CloseCommand。假设我的ViewModel是正确的,并且我对WPF数据绑定的东西缺乏了解是问题,我做错了什么?难道不能按我正在尝试的方式完成吗?

(注意:出于这个问题的目的,我将窗口使用的所有资源合并到windows资源字典中。)

编辑:由于Sam建议我的窗口的DataContext没有设置,我会澄清它已设置,但在创建MainWindow时在App.Xaml的代码中完成。

/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);

        MainWindow mainWindow = new MainWindow();            
        var viewModel = new MainWindowViewModel();

        viewModel.RequestClose += (s, ev) => mainWindow.Close();

        mainWindow.DataContext = viewModel;

        mainWindow.Show();
    }
}

2 个答案:

答案 0 :(得分:2)

这是另一次尝试。您的按钮位于HeaderedContentControl的Header的DataTemplate中。此数据模板具有与父控件不同的数据上下文。它的数据上下文隐含了Header属性的值。所以要解决你需要做的问题

<HeaderedContentControl Header="{Binding}" .../>

空{Binding}语句表示“将属性绑定到此控件的DataContext”。

或者,您可以使用RelativeSource绑定来设置Command绑定。类似的东西:

<Button DockPanel.Dock="Right" 
  Command="{Binding Path=DataContext.CloseCommand, RelativeSource={RelativeSource AncestorType={x:Type HeaderedContentControl}}}">...</Button>

答案 1 :(得分:0)

在Button中指定绑定的路径,但不指定数据源。我认为你缺少的是将窗口的DataContext设置为ViewModel。你需要像

这样的东西
<Window ... DataContext="{StaticResource myViewModel}">
...