wpf:如何弹出用户控件? [英] wpf: How popup a usercontrol?

问题描述

背景:我有一个使用数据网格显示数据的项目，数据网格有一个包含用户控件的 rowdetail 列.用户控件有一些 TextBox 用于用户输入和显示一些消息.

Background: I have a project which use the datagrid to display the data, and the datagrid has a rowdetail column which include a usercontrol. The usercontrol has some TextBox for user inputing and displaying some message.

问题:我想在单击按钮时弹出用户控件，并且弹出的用户控件与 datagrid 的 rowdetail 列中的用户控件具有相同的上下文.这样做的目的是为了让用户更容易与用户控件交互，因为 rowdetail 单元格的空间是有限的.

Problem: I want to make the usercontrol popup when I click a button, and the popuped usercontrol has the same context as the usercontrol's in the rowdetail column of datagrid. The intention of doing so is to make it easy for users to interactive with the usercontrol because that room of the rowdetail cell is limited.

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

The usecontrol has be implemente and it can work normally in the rowdetail cell. However, I have no idea about how to pop it up without change its context, such as data source, messages have been display in the TextBox, etc.. Anyone can give me some advices? By the way, I use the MVVM pattern.

这是 RowDetailTemplate:

Here is the 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>

这里是用户控件(上面代码中的 MyUserControl):

Here is the usercontrol (MyUserControl in the above codes):

<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>

推荐答案

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

You can use the Popup control. Attach a Popup to the current row of your datagrid, probably when you click the button is a good place to create the popup and place it as a child of one of cells in the row you are in.
Then you can add the usercontrol to the popup and then 'show' the popup. This way, the DataContext for the popup and thus for the usercontrol is inherited from the containing row in the datagrid.

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

Below is a very simple implementation of a Popup control just using XAML:

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

弹出窗口包含在堆栈面板中，但只有在选中复选框时才可见，IsOpen.您可以将您的用户控件放在弹出窗口中，我在其中放置了边框和文本块.由于弹出窗口是堆栈面板的成员，如果它没有自己的 DataContext，它会自动使用堆栈面板的 DataContext.

The popup is included in the stackpanel, but is only visible, IsOpen, when the checkbox is checked. You would place your usercontrol in the popup, where I have put the border and textblock. Since the popup is a member of the stackpanel, it automatically uses the DataContext of the stackpanel if it does not have one of its own.

在您的实例中，我显示的堆栈面板类似于您的 DataGrid 行.

In your instance the stackpanel I am showing would be analogous to your DataGrid row.

这篇关于wpf:如何弹出用户控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！