WPF自定義按鈕下面列表框項目

Question

WPF專家 -

我想添加按鈕在我的自定義列表框下，也有滾動條去控制的底部。只有項目應該移動，而不是按鈕。我希望得到一些關於實現這一目標的最佳方式的指導。我認爲需要修改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> 

你顯然不會得到列表框的滾動條轉到屏幕的底部，但你可以修復，通過投入滾動條控制。

編輯模板可能會產生你想要的東西，但你可能會簡單地跑到列表底部的項目可能被按鈕面板隱藏的點。您可以通過增加該列表中最後一項的底部填充或類似的邊距/填充黑客來明顯地克服這個問題。

但是，我認爲根據用戶界面的常識，將滾動條放到最下方是最好的辦法，因爲滾動條應該只放在可滾動的一側。

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>