Пользовательские кнопки WPF под элементами ListBox

Question

Эксперты WPF -

Я пытаюсь добавить кнопки под моим настраиваемым списком, а также полосу прокрутки перейти в нижнюю часть элемента управления. Только элементы должны двигаться, а не кнопки. Я надеялся на некоторые рекомендации о том, как лучше всего этого добиться. Я думал, что ItemsPanelTemplate нужно было изменить, но не был уверен.

Спасибо

альтернативный текст http://i41.tinypic.com/15p4c35.jpg

Мой код ниже

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

Я знаю, что присоединяюсь к вечеринке довольно поздно, но вы сможете сделать это, применив собственный шаблон элемента управления ScrollViewier, который будет использоваться ListBox. Я не проверял это, но он должен работать (или, по крайней мере, предложить отправную точку):

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