1

I want our users to be able to scroll with buttons within a combobox.

I've customized the style and ItemContainerStyle of a ComboBox

Now I don't know how to access the ScrollViewer in my ComboBox from code-behind, and add event handlers for the buttons. I think i'm on the right way, but i'm stuck at this point.

This is what I want to accomplish:

the goal

  • My ComboBox in my MainWindow:

    <ComboBox x:Name="cb" Style="{StaticResource ComboBoxStyle}" 
            ItemContainerStyle="{staticResource ComboBoxItemStyle1}" 
            IsDropDownOpen="True">
    <ComboBoxItem Content="ComboBoxItem"/>
    <ComboBoxItem Content="ComboBoxItem"/>
    <ComboBoxItem Content="ComboBoxItem"/>
    <ComboBoxItem Content="ComboBoxItem"/>
    <ComboBoxItem Content="ComboBoxItem"/>
</ComboBox>

My ItemcontainerStyle:

    <Style x:Key="ComboBoxItemStyle1" TargetType="{x:Type ComboBoxItem}">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="#FFE8E8E8"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" Padding="0,10" Margin="0">
                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Center" VerticalAlignment="Stretch" Margin="0" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsHighlighted" Value="true">
                            <Setter Property="Background" TargetName="Bd" Value="#FF214174"/>
                            <Setter Property="Foreground" Value="#FFE8E8E8"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Style of ComboBox:

<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Grid>
                    <Popup Margin="0" x:Name="PART_Popup" AllowsTransparency="true"
                    IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                        PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
                        Grid.ColumnSpan="2"  HorizontalOffset="0" OverridesDefaultStyle="False">

                        <Border Name="DropDownBorder" Width="150" BorderThickness="1" CornerRadius="0" BorderBrush="Red" Margin="0,5,0,0" Padding="0" VerticalAlignment="Stretch" MaxHeight="250">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0,4" StartPoint="0,0">
                                        <GradientStop Color="#FF001940" Offset="0"/>
                                        <GradientStop Color="White" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="40"/>
                                    </Grid.RowDefinitions>
                                    <ScrollViewer Grid.Row="0"  CanContentScroll="true" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,0,0,40" Padding="0" Foreground="#00000000">
                                    <ItemsPresenter Margin="0"  />
                                    </ScrollViewer>
                                    <UniformGrid Grid.Row="1" Rows="1" Columns="2" Height="40" VerticalAlignment="Stretch">
                                        <RepeatButton Width="50" Background="#00000000" Content="Up" Focusable="False" IsTabStop="False"></RepeatButton>
                                        <RepeatButton Width="50" Background="#00000000" Content="Down" Focusable="False" IsTabStop="False"></RepeatButton>
                                    </UniformGrid>
                                </Grid>
                    </Border>
                        </Popup>
                        <ToggleButton Style="{StaticResource cmbToggle}" Grid.ColumnSpan="2"
                                IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="0"/>
                        <ContentPresenter HorizontalAlignment="Center"
                                    Margin="0,0,21,0"
                                    VerticalAlignment="Center"
                                    IsHitTestVisible="false"
                                    Content="{TemplateBinding SelectionBoxItem}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
4

2 回答 2

2

您需要给它ScrollViewer一个名称才能访问它。您也可以很容易地将其保留在 xaml 中以获得所需的功能：

所以说我指定ScrollViewer名称：

<ScrollViewer x:Name="someScroll"
              ...>

现在修改你RepeatButton的：

<RepeatButton Command="{x:Static ScrollBar.LineUpCommand}"
              CommandTarget="{Binding ElementName=someScroll}"
              ... />
<RepeatButton Command="{x:Static ScrollBar.LineDownCommand}"
              CommandTarget="{Binding ElementName=someScroll}"
              ... />

ScrollBar Fields列出了其他可用的命令，类似于ScrollBar.LineDownCommand/ScrollBar.LineUpCommand

于 2013-09-17T09:34:14.427 回答
1

如果您命名ScrollViewer，那么很容易访问它：

<ScrollViewer x:Name="ScrollViewer" Grid.Row="0"  CanContentScroll="true" 
    VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" 
    HorizontalAlignment="Stretch" Margin="0,0,0,40" Padding="0" Foreground="#00000000">
    <ItemsPresenter Margin="0"  />
</ScrollViewer>

然后您应该能够像这样访问它：

ScrollViewer scrollViewer = (ScrollViewer)cb.Template.FindName("ScrollViewer", cb);
于 2013-09-17T09:20:52.670 回答