wpf:如何弹出用户控件?

时间:2013-09-10 13:15:48

标签: c# wpf mvvm datagrid user-controls

背景: 我有一个使用datagrid显示数据的项目,datagrid有一个rowdetail列,其中包含一个usercontrol。 usercontrol有一些TextBox供用户输入和显示一些消息。

问题: 我想在单击按钮时弹出usercontrol,并且popuped usercontrol与datagrid的rowdetail列中的usercontrol具有相同的上下文。这样做的目的是使用户能够轻松地与用户控件交互,因为rowdetail单元格的空间有限。

usecontrol已经实现,它可以在rowdetail单元格中正常工作。但是,我不知道如何在不改变其上下文的情况下弹出它,例如数据源,消息已经在TextBox中显示等等。任何人都可以给我一些建议吗? 顺便说一句,我使用MVVM模式。

修改 这是RowDetailTemplate:

    <DataTemplate x:Key="RowDetailTemplate">
    <Grid x:Name="RowDetailGrid" HorizontalAlignment="Left" Width="850" Height="355" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <my:MyUserControl x:Name="myUserControl" />
        <Button Grid.Row="1" Width="60" Height="25" Content="Pop Up" 
                    Command="{Binding Path=PopupCommand}"/>
        .....
    </Grid>
</DataTemplate>

以下是usercontrol(上述代码中的MyUserControl):

<UserControl x:Class="MyProject"
         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="300" d:DesignWidth="600">
<Grid>
    <ScrollViewer  Margin="0" HorizontalScrollBarVisibility="Disabled" >
        <StackPanel>
            <ItemsControl Grid.Row="0" ItemsSource="{Binding Output, Mode=OneWay}" FontSize="12">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                            <TextBlock TextWrapping="Wrap" Text="{Binding Path=.}" Foreground="White" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
            <DockPanel Grid.Row="1" LastChildFill="True">                    
                <TextBox Text="{Binding Input, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" 
                     TextWrapping="Wrap"
                     BorderBrush="{x:Null}" SelectionBrush="{x:Null}" 
                     BorderThickness="0" Width="Auto">
                    <TextBox.InputBindings>
                        <KeyBinding Command="{Binding Path=TextBoxEnter}" Key="Enter" />
                    </TextBox.InputBindings>
                </TextBox>
            </DockPanel>
        </StackPanel>
    </ScrollViewer>
</Grid>

2 个答案:

答案 0 :(得分:7)

您可以使用Popup控件。将Popup附加到数据网格的当前行,可能是当您单击按钮是创建弹出窗口的好地方并将其作为您所在行中某个单元格的子项时。 然后,您可以将用户控件添加到弹出窗口,然后“显示”弹出窗口。这样,弹出窗口的DataContext以及usercontrol的DataContext都是从datagrid中的包含行继承的。

以下是仅使用XAML的Popup控件的一个非常简单的实现:

<StackPanel>
  <CheckBox Name="chk1"/>
  <Popup IsOpen="{Binding IsChecked, ElementName=chk1}">
    <Border Background="White">
      <TextBlock Margin="20" Text="I'm Popped Up!"/>
    </Border>
  </Popup>
</StackPanel>

弹出窗口包含在stackpanel中,但只有在选中复选框时才会显示IsOpen。你可以将你的usercontrol放在弹出窗口中,我放置了边框和文本块。 由于弹出窗口是stackpanel的成员,因此如果它没有自己的一个,它会自动使用stackpanel的DataContext。

在您的实例中,我显示的stackpanel类似于您的DataGrid行。

答案 1 :(得分:1)

好吧,我想对Gate Lumas的评论发表评论,但系统不会让我这么做,所以我把它作为答案。

XAML Popup示例:archive of link | original link

如果您下载该示例并查看Senario1的.xaml和.cs文件,您将拥有一个如何使用和实现弹出窗口的完美示例。或者,您可以浏览网站上的代码,但我发现能够运行并与示例交互比查看代码更有帮助。