Custom ComboBox Style errors

Question

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:

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

See: What's the difference between x:Key and x:Name in WPF?

<Style x:Name="ComboToggle" TargetType="ToggleButton">

should be

<Style x:Key="ComboToggle" TargetType="ToggleButton">

since {StaticResource ComboToggle} uses ComboToggle as a key to recursively search parent resource dictionaries for the corresponding resource.

edited May 23 '17 at 10:27

Community

1
1

answered Nov 06 '15 at 00:00

jjj

4,822
1
16
39

Thanks, that has seemed to fix that issue, however the button doesn't display, the dropdown is displayed within the viewer but not as runtime as there is no button to click, I messed the style up? – Martyn Ball Nov 06 '15 at 00:23
@MartynBall: Well, it probably doesn't help that the `ToggleButton.IsChecked` isn't bound to anything, and that you're using the Silverlight default style. Take a look at [this](https://msdn.microsoft.com/en-us/library/ms752094(v=vs.100).aspx) and [this](http://www.eidias.com/Blog/2012/2/20/customizing-wpf-combo-box-style). – jjj Nov 06 '15 at 01:18

Custom ComboBox Style errors

1 Answers1