locked
Blend 3 DropdownToggle style RRS feed

  • Question

  • Hello all,

    I have been looking here for some help on changing the style dramatically for the dropdownToggle control. What I want to do is keep everything about the default the same but add in a background behind the default arrow that is a bit lighter in gray color. I have already tried creating two paths with bezels on the outside corners and it stretches out the dropdowntoggle past the boundaries of the drop down box.

    Also I noticed you cannot put in a rectangle behind the path for the arrow as it replaces the arrow with the rectangle. I have also played with putting in a stackpanel, a canvas won't work either, and the stack panel does not have the ability to change the right side corners from 90 degree angles to corners, I know this is not possible with this container.

    Would I just replace the current layers of the dropdownToggle with my own paths and then adjust the path's width to be the appropriate size for the right side path?

    Also as a side note the labels for the background gradients and overlays are a bit confusing can I suggest that these be labeled more appropriately to which state each one is being used for. Such as gradientMouseOver or something to this effect. I know I can change these on my own and finding out what layer does what is not too bad but for newer Blend users this is a bit confusing, and labeling these layers a bit "better" would ease the customizing of styles and controls. Just a suggestion from a Blend newb. ;)

    Thank you for your time.

    Below is an example of the dropdowntoggle appearance I want.

    Image Hosted by ImageShack.us

    PS

    I have been looking for a tutorial which would explain this customizing in greater detail for Blend 3 but I have not had very much luck.

    Mac
    Monday, August 31, 2009 10:55 PM

All replies

  • Hi Mac

    I just quickly made up something that looks a bit like your image. You need to remove the chrome in the ToggleButton's style and replace it with something like this (no property triggers for MouseOver etc. in here yet):


    <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
    	<Setter Property="MinWidth" Value="0"/>
    	<Setter Property="MinHeight" Value="0"/>
    	<Setter Property="Width" Value="Auto"/>
    	<Setter Property="Height" Value="Auto"/>
    	<Setter Property="Background" Value="Transparent"/>
    	<Setter Property="Focusable" Value="false"/>
    	<Setter Property="ClickMode" Value="Press"/>
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="{x:Type ToggleButton}">
    				<Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
    					<Grid.ColumnDefinitions>
    						<ColumnDefinition Width="*"/>
    						<ColumnDefinition Width="Auto" SharedSizeGroup="ComboBoxButton"/>
    					</Grid.ColumnDefinitions>
    					<Border HorizontalAlignment="Left" BorderBrush="{DynamicResource DefaultButtonStrokeBrush}" BorderThickness="0.5" Width="17" Grid.Column="1" CornerRadius="0,4,4,0" Background="{DynamicResource DefaultButtonFillBrush}">
    						<Rectangle Fill="{DynamicResource SmallDownArrowBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="12" Height="11"/>
    					</Border>
    					<Border HorizontalAlignment="Stretch" Grid.Column="0" Background="{DynamicResource DefaultButtonFillBrush}" BorderBrush="{DynamicResource DefaultButtonStrokeBrush}" BorderThickness="0.5" CornerRadius="4,0,0,4"/>
    				</Grid>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>


    And then obviously apply the style to your combobox's ToggleButton in its template:


    <Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
    	<Setter Property...
                          ...
    
    
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="{x:Type ComboBox}">
    				<Grid SnapsToDevicePixels="true">
    					<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
    						<Grid Grid.IsSharedSizeScope="true">
    							...
    									<ToggleButton Style="{DynamicResource ToggleButtonStyle1}" Grid.ColumnSpan="3" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
    	
    							...
                                                    </Grid>
                                            </Border>
                                    </Grid>      
                            </ControlTemplate>
                   </Setter.Value>
    	</Setter>
    	
            <Style.Triggers>
    				...
    	</Style.Triggers>
    </Style>
    



    The brushes I used in there:


    <LinearGradientBrush
    	x:Key="DefaultButtonFillBrush" 
    	StartPoint="0.517006,1.00002" 
    	EndPoint="0.517006,-0.222192">
    	<LinearGradientBrush.GradientStops>
    			<GradientStop Color="{DynamicResource {x:Static SystemColors.ControlColorKey}}"/>
    			<GradientStop Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}" Offset="0.5"/>
    	</LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <SolidColorBrush
    	x:Key="DefaultButtonStrokeBrush"
    	Color="{DynamicResource {x:Static SystemColors.ControlDarkDarkColorKey}}"/>
    
    <DrawingBrush x:Key="SmallDownArrowBrush" Stretch="Uniform">
    	<DrawingBrush.Drawing>
    		<DrawingGroup>
    			<DrawingGroup.Children>
    				<GeometryDrawing Brush="#FF716F64" Geometry="F1 M 6.01031,5.04718L 6.10352e-005,0L 12.0207,0L 6.01031,5.04718 Z "/>
    			</DrawingGroup.Children>
    		</DrawingGroup>
    	</DrawingBrush.Drawing>
    </DrawingBrush>
    


    Hope this helps?

    Regards

    Carien

    Tuesday, September 1, 2009 7:52 AM
  • This will work great thank you very much. I will check things out tomorrow morning and get back with you ASAP. What I plan on doing is changing the code piece by piece so that I can get a grip on which changes you made to the background and such. I am one of those that learns by breaking things down and asking myself what does each piece of code does, then comment everything for future use whether that be by me or another UX engineer.
    Tuesday, September 1, 2009 8:12 AM