WPF扩展器控制下拉面板

时间:2012-10-25 09:27:42

标签: wpf xaml expander

我想以这样的方式设置我的扩展器控件,使其具有类似于组合框控件的下拉面板。

下拉面板应该像它可以叠加在其他项目之上,例如组合框。

这是我正在使用的扩展器的XAML样式:

<Style TargetType="{x:Type Expander}">
    <Setter Property="Background" Value="{StaticResource Brush_ButtonFill}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Brush_ContainerButtonBorder}"/>
    <Setter Property="Foreground" Value="{StaticResource Brush_FontReadonly}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*" x:Name="ContentRow"/>
                    </Grid.RowDefinitions>
                    <Border Visibility="Collapsed" Grid.Row="1" x:Name="ExpandSite" Background="{StaticResource BrushTransparent}" BorderBrush="{StaticResource Brush_DropdownShadow}">
                        <ContentPresenter Focusable="false"/>
                    </Border>
                    <Border Grid.Row="0" x:Name="Border" Background="{StaticResource Brush_ButtonBorder}" Visibility="Collapsed" BorderThickness="1"/>
                    <ToggleButton Template="{StaticResource ExpanderToggleButtonControlTemplate}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Background="{StaticResource Brush_ButtonFill}" BorderBrush="{StaticResource Brush_ButtonBorder}" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{StaticResource Brush_ButtonBorder}" d:LayoutOverrides="VerticalAlignment" />
                    <ContentPresenter Margin="15,2,2,2" RecognizesAccessKey="True" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Left" IsHitTestVisible="False"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="True">
                        <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.5"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


 <Style x:Key="ExpanderStyle_Dropdown" TargetType="{x:Type Expander}" BasedOn="{StaticResource TextStyle_BaseControl}">
    <Setter Property="Background" Value="{StaticResource Brush_ButtonFill}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Brush_ButtonBorder}"/>
    <Setter Property="Foreground" Value="Black"/>
    <!--<Setter Property="Foreground" Value="{StaticResource Brush_FontReadonly}"/>-->
    <Setter Property="FontSize" Value="{StaticResource FontSizeMedium}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="54"/>
                        <RowDefinition Height="*" x:Name="ContentRow"/>
                    </Grid.RowDefinitions>
                    <Border Visibility="Collapsed" Grid.Row="1" x:Name="ExpandSite" Background="{StaticResource Brush_ButtonShadow}" CornerRadius="0,0,5,5" Margin="0,-5,0,0" Panel.ZIndex="1000">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Focusable="false" Margin="5,10,5,5" Panel.ZIndex="1000"/>
                    </Border>
                    <Border Grid.Row="0" x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="7" Padding="5" Background="{StaticResource Brush_CZBlueSelected}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="50"/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.Row="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5,0,0,5" Padding="5" Grid.ColumnSpan="1" Margin="0,0,1,0"/>
                            <Border x:Name="Shadow" CornerRadius="5" Padding="5" Grid.ColumnSpan="2" BorderBrush="{StaticResource Brush_SearchinputBorder}" BorderThickness="0,0,0,2" Margin="0,0,0,-2"/>
                            <ToggleButton Template="{StaticResource ExpanderToggleButtonControlTemplate_DropDown}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Background="{StaticResource Brush_ButtonFill}" BorderBrush="{StaticResource Brush_ButtonBorder}" Grid.Column="1" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{StaticResource Brush_ButtonBorder}" Margin="1,0,0,0" Height="44" />
                            <ContentPresenter Margin="4" RecognizesAccessKey="True" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False"/>
                        </Grid>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="True">
                        <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.5"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

现在在XAML屏幕中使用相同的内容:

<Expander Name="expanderNextScan" Header="{Binding ElementName=listBoxExpander,Path=SelectedItem.Content}" ExpandDirection="Up" Grid.Column="3" Height="54" Width="Auto" Style="{DynamicResource ExpanderStyle_Dropdown}" >
        <Grid Background="#FFE5E5E5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <ListBox x:Name="listBoxExpander" Height="100" Width="{Binding ElementName=expanderNextScan,Path=ActualWidth}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="0,-10,0,0" Panel.ZIndex="5">
                <ListBoxItem Content="Go to Next Scan" FontSize="{StaticResource FontSizeMedium}" IsSelected="True"/>
                <ListBoxItem FontSize="{StaticResource FontSizeMedium}" Content="Print with preview" />
                <ListBoxItem FontSize="{StaticResource FontSizeMedium}" Content="Export as PDF"/>
                <ListBoxItem FontSize="{StaticResource FontSizeMedium}" Content="Export to DICOM"/>
            </ListBox>
        </Grid>
    </Expander>

现在想要以这样的方式设置样式:扩展器下拉列表框中的列表框应该具有比屏幕上的其他控件更大的z-index,以便它可以覆盖其他控件,例如组合框下拉列表。

请尽快回复。

0 个答案:

没有答案