WPF ComboBox+自定義圖片
阿新 • • 發佈:2018-12-15
傳統的ComboBox沒辦法新增自定義圖示,存在模糊的缺點。採用了自定義的圖示,可以解決該問題。
ComboBoxStyle
<Style TargetType="ComboBox" x:Key="ComboBoxStyle34x30"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ComboBox"> <Grid Background="#F7FDF7"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="30" /> </Grid.ColumnDefinitions> <TextBox Grid.Column="0" IsReadOnly="{TemplateBinding IsReadOnly}" Text="{TemplateBinding Text}" VerticalContentAlignment="Center"></TextBox> <Border Grid.Column="0" BorderThickness="1,1,0,1" BorderBrush="#FFABADB3" CornerRadius="1,0,0,1"></Border> <Border Grid.Column="1" BorderThickness="0,1,1,1" BorderBrush="#FFABADB3" CornerRadius="0,1,1,0"> <ToggleButton Style="{StaticResource ComboxStyleBtn34x30}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Release"></ToggleButton> </Border> <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide"> <Border CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True"> <Border.Effect> <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="0.5"/> </Border.Effect> <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource ScrollViewerStyle}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True"> <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/> </ScrollViewer> </Border> </Popup> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
ComboxStyleBtn34x30
<Style TargetType="ToggleButton" x:Key="ComboxStyleBtn34x30"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Border x:Name="ComboBoxButton"> <Border.Background> <VisualBrush> <VisualBrush.Visual> <Canvas Width="34" Height="30"> <Path Data="M0.5,5.5 C0.5,2.7385763 2.7385763,0.5 5.5,0.5 L116.5,0.5 C119.26142,0.5 121.5,2.7385763 121.5,5.5 L121.5,46.5 C121.5,49.261424 119.26142,51.5 116.5,51.5 L5.5,51.5 C2.7385763,51.5 0.5,49.261424 0.5,46.5 z" HorizontalAlignment="Left" Height="30" Stretch="Fill" Stroke="#FFCDCDCD" VerticalAlignment="Bottom" Width="34" > <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" Opacity="0.99" StartPoint="0.5,0"> <GradientStop Color="#FFDCE0E3" Offset="0.456"/> <GradientStop Color="#FFD8DDE0" Offset="0.828"/> <GradientStop Color="White" Offset="0.033"/> <GradientStop Color="White" Offset="0.979"/> </LinearGradientBrush> </Path.Fill> </Path> <Path Stroke="#FF4E7BBF" Height="1.887" Canvas.Left="8.997" Canvas.Top="15.353" Width="10.77" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.52,1.25 z" Stretch="Fill" Fill="#FF4E7BBF"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="42.475"/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> <Path Stroke="#FF4E7BBF" Height="1.887" Canvas.Left="16.119" Canvas.Top="15.277" Width="11.034" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.784,1.25 z" Stretch="Fill" Fill="#FF4E7BBF"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="-41.32"/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> </Canvas> </VisualBrush.Visual> </VisualBrush> </Border.Background> </Border> <ControlTemplate.Triggers> <Trigger Property="AreAnyTouchesOver" Value="True"> <Setter Property="Background" TargetName="ComboBoxButton"> <Setter.Value> <VisualBrush> <VisualBrush.Visual> <Canvas Width="34" Height="30"> <Path Data="M0.5,0.6165023 C2.997254,0.59726893 2.8098952,0.65987028 2.842921,0.60897645 L107.3705,0.37740332 C116.99575,0.91922384 121.5,4.2233519 121.5,6.9847756 L121.5,44.756377 C121.90224,49.208879 109.43357,51.497385 105.87162,51.5 L5.5,51.5 C2.7385763,51.5 5.4499507,51.480567 0.5,51.506233 z" HorizontalAlignment="Left" Height="40.094" Stretch="Fill" Stroke="#FF4E7BBF" VerticalAlignment="Bottom" Width="38.003" /> <Path Data="M0.5,0.6165023 C2.997254,0.59726893 2.8098952,0.65987028 2.842921,0.60897645 L107.3705,0.37740332 C116.99575,0.91922384 121.5,4.2233519 121.5,6.9847756 L121.5,44.756377 C121.90224,49.208879 109.43357,51.497385 105.87162,51.5 L5.5,51.5 C2.7385763,51.5 5.4499507,51.480567 0.5,51.506233 z" HorizontalAlignment="Left" Height="35.927" Stretch="Fill" VerticalAlignment="Bottom" Width="33.49" Canvas.Left="2.375" Canvas.Top="2.042" StrokeThickness="0" > <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" Opacity="0.99" StartPoint="0.5,0"> <GradientStop Color="#FF8EC3F2" Offset="0.456"/> <GradientStop Color="#FF86AFDF" Offset="0.828"/> <GradientStop Color="#FF91CBF9" Offset="0.033"/> <GradientStop Color="#FFD9E0E6" Offset="0.979"/> </LinearGradientBrush> </Path.Fill> </Path> <Path Stroke="White" Height="1.887" Canvas.Left="12.08" Canvas.Top="21.603" Width="10.77" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.52,1.25 z" Stretch="Fill" Fill="White"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="42.475"/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> <Path Stroke="White" Height="1.887" Canvas.Left="19.202" Canvas.Top="21.527" Width="11.034" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.784,1.25 z" Stretch="Fill" Fill="White"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="-41.32"/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> </Canvas> </VisualBrush.Visual> </VisualBrush> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" TargetName="ComboBoxButton"> <Setter.Value> <VisualBrush> <VisualBrush.Visual> <Canvas Width="34" Height="30"> <Path Data="M0.5,5.5 C0.5,2.7385763 2.7385763,0.5 5.5,0.5 L116.5,0.5 C119.26142,0.5 121.5,2.7385763 121.5,5.5 L121.5,46.5 C121.5,49.261424 119.26142,51.5 116.5,51.5 L5.5,51.5 C2.7385763,51.5 0.5,49.261424 0.5,46.5 z" HorizontalAlignment="Left" Height="30" Stretch="Fill" Stroke="#FF4E7BBF" VerticalAlignment="Bottom" Width="34" > <Path.Fill> <LinearGradientBrush EndPoint="0.5,1 " StartPoint="0.5,0"> <GradientStop Color="White" Offset="0.983"/> <GradientStop Color="White"/> </LinearGradientBrush> </Path.Fill> </Path> <Path Data="M0.5,5.5 C0.5,2.7385763 2.7385763,0.5 5.5,0.5 L116.5,0.5 C119.26142,0.5 121.5,2.7385763 121.5,5.5 L121.5,46.5 C121.5,49.261424 119.26142,51.5 116.5,51.5 L5.5,51.5 C2.7385763,51.5 0.5,49.261424 0.5,46.5 z" HorizontalAlignment="Left" Height="25.67" Stretch="Fill" VerticalAlignment="Bottom" Width="29.333" Canvas.Left="2.331" Canvas.Top="2.163" > <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF86AEDE" Offset="0.812"/> <GradientStop Color="#FF91CCFA"/> <GradientStop Color="#FF8DC1F0" Offset="0.565"/> <GradientStop Color="#FFDFE3E6" Offset="1"/> </LinearGradientBrush> </Path.Fill> </Path> <Path Stroke="White" Height="1.887" Canvas.Left="9.565" Canvas.Top="15.08" Width="10.77" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.52,1.25 z" Stretch="Fill" Fill="White"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="42.475"/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> <Path Stroke="White" Height="1.887" Canvas.Left="16.687" Canvas.Top="15.004" Width="11.034" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.784,1.25 z" Stretch="Fill" Fill="White"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="-41.32"/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> </Canvas> </VisualBrush.Visual> </VisualBrush> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>