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>