WPF Пользовательские кнопки ниже ListBox Элементы

Question

WPF Эксперты -

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

Благодаря

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

Вы явно не получите скроллбар в ListBox, чтобы перейти к нижней части экрана, но вы можете исправить это, поставив в элементе управления 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>