2012-07-10 176 views
1

我想要一個或兩個複選框在我的組合框(如微軟字)enter image description here添加複選框到ComboboxItem

我把我的複選框放在一個單獨的Combobox項目中,並將它們設置爲禁用項目。 (我不希望用戶可以選擇這個項目)。但該複選框始終處於禁用狀態。 enter image description here

有沒有另一種解決方案?

這是我的代碼:

<ComboBox Height="36"> 
     <ComboBoxItem Height="36"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="30"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 
       <Grid Grid.Column="1"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="16" /> 
         <RowDefinition Height="16" /> 
        </Grid.RowDefinitions> 
        <TextBlock Text="Item Title 1" Grid.Row="0" FontWeight="Bold" /> 
        <TextBlock Text="Item Description 1" Grid.Row="1" FontStyle="Italic" /> 
       </Grid> 
      </Grid> 
     </ComboBoxItem> 
     <ComboBoxItem Height="36"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="30"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 
       <Grid Grid.Column="1"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="16" /> 
         <RowDefinition Height="16" /> 
        </Grid.RowDefinitions> 
        <TextBlock Text="Item Title 2" Grid.Row="0" FontWeight="Bold" /> 
        <TextBlock Text="Item Description 2" Grid.Row="1" FontStyle="Italic" /> 
       </Grid> 
      </Grid> 
     </ComboBoxItem> 
     <ComboBoxItem Height="25" IsEnabled="False"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="30"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 
       <Grid Grid.Column="1"> 
        <CheckBox IsChecked="false" HorizontalAlignment="Left" Width="16" Height="16" IsEnabled="True" /> 
        <Label Margin="10 0 0 0" HorizontalAlignment="Left" Content="I'm a checkbox ;)" /> 
       </Grid> 
      </Grid> 
     </ComboBoxItem> 
    </ComboBox> 

回答

1

如果禁用元素,要禁用它作爲一個容器爲好,因此禁止其所有的孩子了。如果您想要一個未禁用但不可選的項目,則它不應包含在ComboBox的項目列表中。出於您的目的,使用菜單可能是一個更好的主意,因爲這就是您想要複製的內容,而不是試圖將意想不到的功能擠入組合框。

話雖如此,如果你堅持一個組合框,添加列表之外的項目,你可以修改的模板組合框(使用混合爲您生成一個副本):

<ComboBox Height="36"> 
    <ComboBox.Template> 
     <ControlTemplate TargetType="{x:Type ComboBox}"> 
      <Grid x:Name="MainGrid" SnapsToDevicePixels="true"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/> 
       </Grid.ColumnDefinitions> 
       <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom"> 
        <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}"> 
         <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"> 
          <ScrollViewer x:Name="DropDownScrollViewer"> 
           <Grid RenderOptions.ClearTypeHint="Enabled"> 
            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> 
             <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/> 
            </Canvas> 
            <StackPanel> 
             <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
             <CheckBox IsChecked="false" Content="I'm a checkbox ;)" Margin="10"/> 
            </StackPanel> 
           </Grid> 
          </ScrollViewer> 
         </Border> 
        </Microsoft_Windows_Themes:SystemDropShadowChrome> 
       </Popup> 
       <ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}"/> 
       <ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"> 
        <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/> 
        <Setter Property="Color" TargetName="Shdw" Value="#71000000"/> 
       </Trigger> 
       <Trigger Property="HasItems" Value="false"> 
        <Setter Property="Height" TargetName="DropDownBorder" Value="95"/> 
       </Trigger> 
       <Trigger Property="IsEnabled" Value="false"> 
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
        <Setter Property="Background" Value="#FFF4F4F4"/> 
       </Trigger> 
       <Trigger Property="IsGrouping" Value="true"> 
        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
       </Trigger> 
       <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false"> 
        <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/> 
        <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </ComboBox.Template> 
    <ComboBoxItem Height="36"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="30"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Grid Grid.Column="1"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="16" /> 
        <RowDefinition Height="16" /> 
       </Grid.RowDefinitions> 
       <TextBlock Text="Item Title 1" Grid.Row="0" FontWeight="Bold" /> 
       <TextBlock Text="Item Description 1" Grid.Row="1" FontStyle="Italic" /> 
      </Grid> 
     </Grid> 
    </ComboBoxItem> 
    <ComboBoxItem Height="36"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="30"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Grid Grid.Column="1"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="16" /> 
        <RowDefinition Height="16" /> 
       </Grid.RowDefinitions> 
       <TextBlock Text="Item Title 2" Grid.Row="0" FontWeight="Bold" /> 
       <TextBlock Text="Item Description 2" Grid.Row="1" FontStyle="Italic" /> 
      </Grid> 
     </Grid> 
    </ComboBoxItem> 
</ComboBox> 

在這裏,我保留了整個默認模板,但在ItemsPresenter周圍的額外StackPanel中添加了新的CheckBox。如果您不混合複製,試試上面的模板,你還需要下面的xmlns(以及在項目中PresentationFramework.Aero參考):

xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" 

而這些資源:

<Window.Resources> 
    <Geometry x:Key="DownArrowGeometry">M 0 0 L 3.5 4 L 7 0 Z</Geometry> 
    <Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="IsTabStop" Value="false"/> 
     <Setter Property="Focusable" Value="false"/> 
     <Setter Property="ClickMode" Value="Press"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true"> 
         <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"> 
          <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center"/> 
         </Grid> 
        </Microsoft_Windows_Themes:ButtonChrome> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 
+0

@John_Bowen謝謝,但是有沒有簡單的方法? – David 2012-07-11 14:53:39

+1

你正在試圖讓ComboBox做一些複雜的事情,它不是爲了支持而設計的,所以沒有一個你可以直接翻轉的開關。編輯模板並不困難,特別是如果你利用Blend,但如果你不想這樣做,你應該嘗試一個Menu,它是爲這樣的事情設計的。 – 2012-07-11 15:18:32