WPF - Comboboxitems - 일반 배경 이미지

Question

인사말

내가 WPF에서 콤보 상자에 대한 질문이, 내가 현재의 상황을 스케치하자, 내가 가진 : 한마디로

<ComboBox IsEditable="False" Height="23" HorizontalAlignment="Left" Margin="8,112,0,0" Name="comboBox1" VerticalAlignment="Top" Width="140" Background="Transparent"> 
    <Image Source="pack://application:,,,/Images/Style/Player/Static/Red.png" Width="122" /> 
    <Image Source="pack://application:,,,/Images/Style/Player/Static/Blue.png" Width="122" /> 
    <Image Source="pack://application:,,,/Images/Style/Player/Static/Teal.png" Width="122" /> 
    <Image Source="pack://application:,,,/Images/Style/Player/Static/Purple.png" Width="122" /> 
    <Image Source="pack://application:,,,/Images/Style/Player/Static/Yellow.png" Width="122" /> 
    <Image Source="pack://application:,,,/Images/Style/Player/Static/Orange.png" Width="122" /> 
    <Image Source="pack://application:,,,/Images/Style/Player/Static/Green.png" Width="122" /> 
    <Image Source="pack://application:,,,/Images/Style/Player/Static/Pink.png" Width="122" /> 
</ComboBox> 

몇 이미지와 콤보 그것에서 ComboboxItem로. 어떻게 하나의 배경 이미지 PER ComboboxItem 대신에 이러한 모든 이미지에 대해 1 개의 큰 배경 이미지 (콤보 박스에서 확장 된 상자의 크기)를 갖도록 할 수 있습니까? ComboboxItem의 각 이미지는 투명 배경이므로 배경 이미지를 볼 수 있어야합니다.

읽어 주셔서 감사 드리며 가능한 조언을드립니다.

Answer 1

ComboBox Popup의 배경을 변경하는 것은 Korin-Marek K.가 말한 것처럼 (내가 아는 한) 쉽지 않습니다. ComboBox를 다시 템플릿 화하고 팝업에서 테두리의 배경을 설정해야합니다. 다행히 Blend에 대한 액세스가 어렵지 않습니다. 이 작업을 수행하려면 PresentationFramework.Aero에 대한 참조를 추가해야합니다.

<Window ... 
    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> 
    <ControlTemplate x:Key="comboBoxTemplate" 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"> 

         <!-- ONLY CHANGE MADE FROM ORIGINAL TEMPLATE --> 
         <Border.Background> 
          <ImageBrush ImageSource="pack://application:,,,/Images/Style/Player/Static/Red.png"/> 
         </Border.Background> 
         <!-- END OF CHANGE FROM ORIGINAL TEMPLATE --> 

         <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> 
           <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
          </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> 
</Window.Resources> 

<ComboBox Template="{StaticResource comboBoxTemplate}" .../> 

Answer 2

콤보 박스 용 스타일을 직접 작성하고이 스타일로 템플릿 섹션을 변경해야합니다.
이 기사에서는 http://msdn.microsoft.com/en-us/library/ms752094.aspx을 사용하여 자신 만의 스타일을 작성하는 방법을 찾을 수 있습니다.
팝업의 배경색을 변경하려면 PART_Popup을이 스타일로 변경해야합니다.