0

我在用户控件中的 WPF Expander 遇到问题,该控件在 ListBox 中呈现。本质上,我试图在我的 ListBox 中的每个 ListItem 上获得 PopUpButton 行为。当我打开扩展器时,内容在其他所有内容之后呈现,就好像它是透明的,或者在 z 顺序中更低。我也尝试过使用 WPF PopUp 和 Toggle Button(使用在 Karle Shivllet 的博客中描述的技术——带有弹出内容的扩展器控件),但无济于事。

让我先描述一下我正在尝试做的事情。我有两个控件显示我需要为我的应用程序配置的输入列表。为简单起见,一个用户控件用于配置图形的输入,另一个控件用于控制简单 Excel 网格的输入。图形和网格的输入都有需要配置的属性。我开发了一个名为 InputSelectControl 的简单用户控件,它将呈现一个 ListBox,其中包含要为图形或网格配置的输入列表。ListBox 中的每个 ListItem 都包含一个用于输入名称(例如压力、ECG 等)的 TextBlock 和一个 WPF 扩展器,当单击该扩展器时,该扩展器会显示该输入的属性编辑器。由于属性编辑器的呈现方式会有所不同,具体取决于我处理的是图形输入还是网格输入,我在 InputSelectControl 上使用了 ControlTemplate 类型的 DependencyProperty。这允许我的网格和图表分别提供他们编辑输入属性所需的演示文稿。另请注意,我将不只是需要此行为的图形和网格,因此希望使其成为可以动态接收呈现行为的用户控件。

我尝试将 Expander 放在我的属性编辑器模板中,也尝试在不同的地方尝试使用 ZIndex,但总是以相同的行为结束,Expander 弹出窗口显示在列表中的 ListItems 后面。

下面是一些代码,进一步描述了我的方法。希望有人能帮我摆脱这个泡菜。

XAML 表示我的 Grid(可能是图形或其他东西)控件,它包含我的 InputSelectControl:

<UserControl x:Class="MyApp.GridView"
             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" 
             xmlns:props="clr-namespace:PopupButtonDependencyProp" mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <!-- Specify the control tempalte we want loaded into the 
             properies popup for a grid-->
        <ControlTemplate x:Key="GridPropertyEditorTemplate" TargetType="ContentControl">
            <props:GridInputPropertyEditor />
        </ControlTemplate>
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Text="Hello Grid" Margin="5" />

        <!-- Tell the InputSelectControl what template to load into Property 
             Window for each Grid Input item -->
        <props:InputSelectControl Grid.Row="1" 
                 DataContext="{Binding VmUsedInputs, Mode=OneWay}" 
                 PropertyEditorTemplate="{StaticResource GridPropertyEditorTemplate}" />
    </Grid>
</UserControl>

XAML 表示我的InputSelectControl,它显示我的输入列表和我希望我的“弹出行为”用于编辑属性的每个 ListItem 的 ContentControl 占位符:

<UserControl x:Class="MyApp.InputSelectControl"
             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" 
             xmlns:props="clr-namespace:PopupButtonDependencyProp" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
  <Grid>
    <!-- Listbox holding our inputs. Assuming whatever we're contained in has 
         set our DataContext to a valid Input collection-->
    <ListBox x:Name="inputsUsed" Grid.Row="1" ItemsSource="{Binding}"         
             ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
             ScrollViewer.VerticalScrollBarVisibility="Auto" 
             SelectionMode="Multiple" ClipToBounds="True">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Border x:Name="border" CornerRadius="7">
            <StackPanel VerticalAlignment="Stretch" Orientation="Horizontal">
               <!-- Input label-->
               <TextBlock Text="{Binding Path=Label}" FontWeight ="Bold"
                          FontSize ="12" FontStyle = "Normal" 
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch" Margin="5,0,5,0" />
               <Expander x:Name="GridPropEditor" Header="Properties" 
                         Height="Auto" Margin="5,0,0,0" 
                         ToolTip="Open trace property dialog">
                  <!-- Properties button - The ContentControl below is rendering 
                       the PropertyEditorTemplate that was set by whoever contains us -->
                  <ContentControl  Template="{Binding PropertyEditorTemplate, 
                                   RelativeSource={RelativeSource AncestorType=props:InputSelectControl}}" />
                     </Expander>
            </StackPanel>
          </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </UserControl>

C# 代表我的 DependencyProperty 用于注入属性编辑器模板以显示在弹出窗口中。

/// <summary>
/// Interaction logic for InputSelectControl.xaml
/// </summary>
public partial class InputSelectControl : UserControl
{
    #region Dependency Property stuff

    /// <summary>
    /// Dependency Property for control template to be rendered. This 
    /// lets us adorn the InputSelectControl with content in the Xaml. 
    /// The content can be different fore each instance of InputSelectControl.
    /// </summary>
    public static DependencyProperty PropertyEditorTemplateProperty =
        DependencyProperty.Register("PropertyEditorTemplate", 
                typeof(ControlTemplate), typeof(InputSelectControl));

    /// <summary>
    /// PropertyEditorTemplate. This is how the property is set and get by WPF
    /// </summary>
    public ControlTemplate PropertyEditorTemplate
    {
        get { return GetValue(PropertyEditorTemplateProperty) as ControlTemplate; }
        set { SetValue(PropertyEditorTemplateProperty, value); }
    }

    #endregion

    /// <summary>
    /// Constructor
    /// </summary>
    public InputSelectControl()
    {
        InitializeComponent();
    }
}

XAML 代表我的 GridInputPropertyEditor,它是描述用于编辑网格属性的演示文稿的模板。这对于 Graph 会有所不同:

<UserControl x:Class="MyApp.GridInputPropertyEditor"
             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="300">

<Canvas Panel.ZIndex=”99”&gt;
    <!-- Property Editor Control - Assumes DataContext holds to the properties 
         that need to be edited-->
    <StackPanel Orientation="Vertical" Background="WhiteSmoke">

        <!-- Lists the properties for a Grid to be edited. We could use 
             any layout we need here. -->
        <ListBox ItemsSource="{Binding Properties}" Background="WhiteSmoke" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="5,5">
                        <TextBlock Text="{Binding Label}" FontWeight="Bold"/>
                        <TextBlock Text=":" />
                        <TextBox Text="{Binding Value}" Margin="10,0" Width="20" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</Canvas>
</UserControl>

使用 Snoop 我能够弄清楚,如果我将 ListBox 项的 Z-Index 设置为较高的数字,我的属性编辑器就会出现在前台。如果有人看到更好的解决方法,请告诉我。否则,我可以使用一些帮助来提出触发器,以根据所选项目提高和降低 zindex。

4

1 回答 1

0

好的,经过几次试验和磨难,我能够使用背后的代码提出解决方案。我有兴趣找到一种使用触发器执行此操作的方法,但我不确定这种方法是否可行。

这是更新扩展器 XAML:

<Expander x:Name="GridPropEditor" Header="Properties" Height="Auto" Margin="5,0,0,0" 
          ToolTip="Open trace property dialog"
          Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, 
                                         AncestorType={x:Type ListBoxItem}}}"
          PreviewMouseDown="GridPropEditor_PreviewMouseDown"  
          Expanded="GridPropEditor_Expanded">

这是我添加到 xaml.cs 文件中的代码

//When an expander is expanded, collapse all the other expanders
private void GridPropEditor_Expanded(object sender, RoutedEventArgs e)
{
    if (ExpandersSelected == null)
        ExpandersSelected = new List<Expander>();

    var expander = (sender as Expander);
    var listbox = expander.Tag as ListBoxItem;

    if (!ExpandersSelected.Contains(expander))
        ExpandersSelected.Add(expander);

    if (ExpandersSelected != null)
    {
        foreach(var x in ExpandersSelected)
        {
            if (x.Equals(expander))
            {
                listbox.SetValue(Panel.ZIndexProperty, 99);
                continue;
            }   
            var l = x.Tag as ListBoxItem;
            x.IsExpanded = false;
            l.SetValue(Panel.ZIndexProperty, 0);
        }
    }
}

解决方案背后的代码关闭所有可能已经打开的扩展器,并通过将 zindex 设置为 99 将当前扩展的 Expanders 容器带到前台。

同样,如果有人有更好的解决方案,我会全力以赴。

于 2010-11-16T04:55:35.363 回答