WPF ComboBox+自定义图片,。其核心是采用了VisualBrush+Canvas+Path组合的方式。

传统的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>

猜你喜欢

转载自blog.csdn.net/xpj8888/article/details/83115237