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

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>

透明的

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

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

显然，您不会让listbox的滚动条显示在屏幕底部，但是您可以通过添加滚动条控件来解决这个问题

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

---

然而，从用户界面的常识来看，我不认为将滚动条的大小调整到底部是最好的主意，因为滚动条通常应该只放在可滚动条的一侧。

我知道我参加派对的时间已经很晚了，但您应该能够通过应用ListBox使用的自定义ScrollViewer控件模板来实现这一点。我还没有对此进行测试，但它应该可以工作（或者至少提供一个起点）：

...

我已经与团队其他成员进行了交谈，我相信我们将从设计师那里获得新的薪酬，并按照您的建议行事。我认为滚动条也令人困惑。我还有一个问题。当我添加一个包含大量文本的列表项，并且它必须换行时，我会在列表框的底部留下一堆空白。你知道如何修剪底部多余的空间吗？@Ryan:我刚刚试过（在列表框中包装文本），明白你的意思了。我不知道是什么原因造成的，但把它写成一个新问题，这样其他人都能帮上忙也没什么坏处。只需链接一个图像即可立即清晰显示（我只是在复制场景后才明白你的意思）。

    <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>