Attempting to style a custom ComboBox, turns out it's a pain! I have used most of the default ComboBox Style as shown here.
Here is my code, i'm getting an error saying:
The resource "ComboToggle" could not be resolved.
It should be able to see that style as it's in the grid's resources.
XAML
<!-- Combo Box Style --> <Style TargetType="ComboBox"> <Setter Property="OverridesDefaultStyle" Value="True" /> <Setter Property="Padding" Value="6,2,25,2" /> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ComboBox"> <Grid> <Grid.Resources> <Style x:Name="ComboToggle" TargetType="ToggleButton"> <Setter Property="Foreground" Value="White" /> <Setter Property="Background" Value="Red" /> <Setter Property="Padding" Value="3" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToggleButton"> <Grid> <Rectangle x:Name="Highlight" RadiusX="2" RadiusY="2" Opacity="0" IsHitTestVisible="false" Stroke="#FF6DBDD1" StrokeThickness="1" Margin="{TemplateBinding BorderThickness}" /> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/> <Rectangle x:Name="FocusVisualElement" RadiusX="3.5" Margin="1" RadiusY="3.5" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" IsHitTestVisible="false" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <Border x:Name="ContentPresenterBorder"> <Grid> <ToggleButton x:Name="DropDownToggle" Style="{StaticResource ComboToggle}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" HorizontalContentAlignment="Right" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"> <Path x:Name="BtnArrow" Height="4" Width="8" Stretch="Uniform" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " Margin="0,0,6,0" HorizontalAlignment="Right"> <Path.Fill> <SolidColorBrush x:Name="BtnArrowColor" Color="#FF333333"/> </Path.Fill> </Path> </ToggleButton> <ContentPresenter x:Name="ContentPresenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> </ContentPresenter> </Grid> </Border> <Popup x:Name="Popup"> <Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Height="Auto" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFFFFFFF" Offset="0"/> <GradientStop Color="#FFFEFEFE" Offset="1"/> </LinearGradientBrush> </Border.Background> <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1"> <ItemsPresenter/> </ScrollViewer> </Border> </Popup> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> This is the look i'm attempting to make:
