3

I have a custom ComboBox defined in a resource xaml file. Everything's working fine, but the drop down only shows if I focus on the combobox and then press alt-dn. I really want the popup to show when clicked as with standard comboboxes, but can't work out why my template is preventing this. Can anyone please help shed any light?

<ControlTemplate TargetType="ComboBox" x:Key="ComboBoxTemplate">
        <Border Name="Border" BorderBrush="{DynamicResource ButtonBorder}" Background="{DynamicResource ButtonBackgroundBrush}" BorderThickness="2" CornerRadius="3"
                TextBlock.FontFamily="{DynamicResource Font}" TextBlock.FontSize="{DynamicResource MainFontSize}" TextBlock.Foreground="{DynamicResource PlainTextColour}">
            <Grid>
                <Rectangle Name="Focus" Grid.ColumnSpan="2" Visibility="Hidden" Stroke="{DynamicResource FocusColor}" Margin="0" StrokeThickness="1" StrokeDashArray="2 1" SnapsToDevicePixels="True" />
                <ContentPresenter Name="Content" Content="{TemplateBinding SelectedItem}" RecognizesAccessKey="True" Margin="5" VerticalAlignment="Center" HorizontalAlignment="Center" FocusVisualStyle="{x:Null}" />
                <Path x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource GlyphBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
                <Popup x:Name="PART_Popup"
                  IsOpen="{TemplateBinding IsDropDownOpen}">
                    <Border x:Name="PopupBorder" Style="{DynamicResource CustomBorder}"
                    HorizontalAlignment="Stretch" Height="Auto" 
                    MinWidth="{TemplateBinding ActualWidth}"
                    MaxHeight="{TemplateBinding MaxDropDownHeight}" 
                    Background="{DynamicResource WindowBackground}">
                        <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </Border>
                </Popup>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="10"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{DynamicResource MouseOverButtonBrush}"/>
                <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource MouseOverBorder}"/>
            </Trigger>
            <Trigger Property="IsKeyboardFocused" Value="True">
                <Setter TargetName="Focus" Property="Visibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="Border" Property="TextBlock.Foreground" Value="{DynamicResource DisabledTextColour}"/>
                <Setter TargetName="Border" Property="Background" Value="{DynamicResource DisabledButtonBackground}"/>
                <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource DiabledButtonBorder}"/>
            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate>
4

1 回答 1

2

我认为您需要在模板中实现ToggleButton：

<ToggleButton Name="ToggleButton" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" />

IsChecked负责展示的物业Popup。

并使用Popup这样的： 

<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" ... />

样式的完整示例ToggleButton：

    <!-- Template for ToggleButton -->
    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>

            <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" Background="#A6A6A6" BorderBrush="Gray" BorderThickness="1" />

            <Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White" BorderBrush="Gray" BorderThickness="0" />

            <Path x:Name="Arrow" Grid.Column="1" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
        </Grid>

        <ControlTemplate.Triggers>
            <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="Background" Value="Black" />
                <Setter TargetName="Border" Property="Cursor" Value="Arrow" />
            </Trigger>

            <Trigger Property="ToggleButton.IsChecked" Value="True">
                <Setter TargetName="Border" Property="Background" Value="#D0D0D0" />
            </Trigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledForegroundBrush}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- Template for TextBox (in ComboBox) -->
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
        <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" />
    </ControlTemplate>

    <!-- Main style for ComboBox -->
    <Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
        <Setter Property="MinWidth" Value="10" />
        <Setter Property="MinHeight" Value="10" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid>
                        <ToggleButton Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" />
                        <ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" />

                        <TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3,3,23,3" Focusable="True" Background="Transparent" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}" />

                        <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
                            <Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Border x:Name="DropDownBorder" Background="White" BorderThickness="1" BorderBrush="Gray" />

                                <ScrollViewer Margin="2" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="False">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
                        </Trigger>

                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                        </Trigger>

                        <Trigger Property="IsGrouping" Value="True">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
                        </Trigger>

                        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                            <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0" />
                            <Setter TargetName="DropDownBorder" Property="Margin" Value="0" />
                        </Trigger>

                        <Trigger Property="IsEditable" Value="True">
                            <Setter Property="IsTabStop" Value="False" />
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
                            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden" />
                            <Setter Property="Cursor" Value="IBeam" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Output

在此处输入图像描述

于 2013-07-30T14:41:27.980 回答