列表框项目下方的 WPF 自定义按钮

Question

WPF 专家 -

我正在尝试在我的自定义列表框下方添加按钮，并将滚动条置于控件的底部。只有项目应该移动，而不是按钮。我希望就实现这一目标的最佳方法提供一些指导。我在想 ItemsPanelTemplate 需要修改，但不确定。

谢谢

我的代码在下面

   <!-- List Item Selected -->
    <LinearGradientBrush x:Key="GotFocusStyle"  EndPoint="0.5,1" StartPoint="0.5,0">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="Black" Offset="0.501"/>
            <GradientStop Color="#FF091F34"/>
            <GradientStop Color="#FF002F5C" Offset="0.5"/>
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <!-- List Item Hover -->
    <LinearGradientBrush x:Key="MouseOverFocusStyle" StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#FF013B73" Offset="0.501"/>
            <GradientStop Color="#FF091F34"/>
            <GradientStop Color="#FF014A8F" Offset="0.5"/>
            <GradientStop Color="#FF003363" Offset="1"/>
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <!-- List Item Selected -->
    <LinearGradientBrush x:Key="LostFocusStyle" EndPoint="0.5,1" StartPoint="0.5,0">
        <LinearGradientBrush.RelativeTransform>
            <TransformGroup>
                <ScaleTransform CenterX="0.5" CenterY="0.5"/>
                <SkewTransform CenterX="0.5" CenterY="0.5"/>
                <RotateTransform CenterX="0.5" CenterY="0.5"/>
                <TranslateTransform/>
            </TransformGroup>
        </LinearGradientBrush.RelativeTransform>
        <GradientStop Color="#FF091F34" Offset="1"/>
        <GradientStop Color="#FF002F5C" Offset="0.4"/>
    </LinearGradientBrush>

    <!-- List Item Highlight -->
    <SolidColorBrush x:Key="ListItemHighlight" Color="#FFE38E27" />

    <!-- List Item UnHighlight -->
    <SolidColorBrush x:Key="ListItemUnHighlight" Color="#FF6FB8FD" />

    <Style TargetType="ListBoxItem">
        <EventSetter Event="GotFocus" Handler="ListItem_GotFocus"></EventSetter>
        <EventSetter Event="LostFocus" Handler="ListItem_LostFocus"></EventSetter>
    </Style>

    <DataTemplate x:Key="CustomListData" DataType="{x:Type ListBoxItem}">
        <Border BorderBrush="Black" BorderThickness="1"  Margin="-2,0,0,-1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=ActualWidth}" />
                </Grid.ColumnDefinitions>
                <Label 
                        VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent"
                        Foreground="{StaticResource ListItemUnHighlight}"
                        FontSize="24"
                        Tag="{Binding .}"
                        Grid.Column="0"
                        MinHeight="55"
                        Cursor="Hand"
                        FontFamily="Arial"
                        FocusVisualStyle="{x:Null}"
                        KeyboardNavigation.TabNavigation="None"
                        Background="{StaticResource LostFocusStyle}"
                        MouseMove="ListItem_MouseOver"
                        >
                    <Label.ContextMenu>
                        <ContextMenu Name="editMenu">
                            <MenuItem Header="Edit"/>
                        </ContextMenu>
                    </Label.ContextMenu>
                    <TextBlock Text="{Binding .}" Margin="15,0,40,0" TextWrapping="Wrap"></TextBlock>
                </Label>
                <Image 
                    Tag="{Binding .}"
                    Source="{Binding}"
                    Margin="260,0,0,0"
                    Grid.Column="1"
                    Stretch="None"
                    Width="16"
                    Height="22" 
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" 
                    />
            </Grid>
        </Border>
    </DataTemplate>

</Window.Resources>

<Window.DataContext>
    <ObjectDataProvider ObjectType="{x:Type local:ImageLoader}"  MethodName="LoadImages"  />
</Window.DataContext>


<ListBox ItemsSource="{Binding}" Width="320" Background="#FF021422" BorderBrush="#FF1C4B79" >

    <ListBox.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">Transparent</SolidColorBrush>

        <Style TargetType="{x:Type ListBox}">
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
            <Setter Property="ItemTemplate" Value="{StaticResource CustomListData }" />
        </Style>

    </ListBox.Resources>

</ListBox>

Answer 1

为什么不将两个控件（列表和按钮面板）放入 StackPanel 中？

<StackPanel HorizontalAlignment="Left" Margin="0,0,0,0" Width="240">
    <ListBox Height="320"/>
    <Button Content="buttons go here"/>
</StackPanel>

您显然不会让列表框的滚动条移到屏幕底部，但您可以通过放入一个 ScrollBar 控件来解决这个问题。

编辑模板可能会产生您想要的结果，但您可能会遇到一个点，即列表底部的项目可能会被按钮面板隐藏。您可以通过增加该列表中最后一项的底部填充或类似的边距/填充技巧来明显克服这个问题。

但是，就用户界面中的常识而言，我不认为将滚动条调整到底部是最好的主意，因为滚动条通常应该只放在可滚动的一侧。

Answer 2

我知道我加入聚会很晚，但您应该能够通过应用一个供 ListBox 使用的自定义 ScrollViewier 控件模板来完成此操作。我没有对此进行测试，但它应该可以工作（或至少提供一个起点）：

    <ListBox ...>
    <ListBox.Resources>
        <Style TargetType="ScrollViewer">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <!-- Items Go Here -->
                            <ScrollContentPresenter Grid.Column="0" />

                            <!-- Buttons Go Here -->        
                            <Grid Grid.Column="0"
                                  Grid.Row="1"
                                  >
                                  ...
                            </Grid>

                            <!-- ScrollBar spans all three rows but should only affect the presenter -->
                            <ScrollBar x:Name="PART_VerticalScrollBar"
                                        Grid.Column="1"
                                        Grid.Row="0"
                                        Grid.RowSpan="3"
                                        Value="{TemplateBinding VerticalOffset}"
                                        Maximum="{TemplateBinding ScrollableHeight}"
                                        ViewportSize="{TemplateBinding ViewportHeight}"
                                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                        />

                            <ScrollBar x:Name="PART_HorizontalScrollBar"
                                        Grid.Column="0"
                                        Grid.Row="1"
                                        Orientation="Horizontal"
                                        Value="{TemplateBinding HorizontalOffset}"
                                        Maximum="{TemplateBinding ScrollableWidth}"
                                        ViewportSize="{TemplateBinding ViewportWidth}"
                                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                        />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.Resources>
</ListBox>