ExpanderButtonStyle Not Working

[centuit]

Hi,

I am trying to customize the Drop Down button of the Color Picker and I am running into all kinds of problems.
I tried Examples from your previous threads and they dont seem to work, specially the one "250018_ColorPickerExpanderStyle.zip"
The application keeps on crashing.

I did change the style property from "ExpanderButtonStyle" to "ColorButtonStyle" and it seem work, however I cannot change the width.
It does not matter what I set the width to it seems to not change. I would like to make the expander button wider.

Using 2011 Q2 version.

Here is the style code:

<telerik:RadWindow.Resources>
      <Style x:Key="MyColorButtonStyle" TargetType="Button">
          <Setter Property="Width" Value="100" />
          <Setter Property="Template">
              <Setter.Value>
                  <ControlTemplate TargetType="Button">
                      <StackPanel>
                          <TextBlock Text="Fill In Color" />
                          <Rectangle Margin="2" Width="16" Height="16" Fill="{TemplateBinding Background}" />
                      </StackPanel>
                  </ControlTemplate>
              </Setter.Value>
          </Setter>
      </Style>
  </telerik:RadWindow.Resources>

Here is the ColorPicker Code:

<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
    <telerik:RadColorPicker x:Name="_colorPicker" Height="25" Width="100" SelectedColor="Red" ColorButtonStyle="{StaticResource MyColorButtonStyle}" />
    <Slider x:Name="SliderA" Width="100" Height="25" Orientation="Horizontal" Maximum="255" SmallChange="1" >
        <Slider.Background>
            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                <GradientStop x:Name="GradientStopA0" Color="#00000000" Offset="0.0" />
                <GradientStop x:Name="GradientStopA1" Color="#FF000000" Offset="1.0" />
            </LinearGradientBrush>
        </Slider.Background>
    </Slider>
</StackPanel>

Please help.

Thanks

[Petar Mladenov]

Hi Centuit,

 In the mentioned project I have used a Style from newer version (Q1 2011) of RadControls than the one used in the project (Q3 2010), so please excuse me. In order to change this widtch successfully, you need to edit the default template of the RadColorPicker and play with the Widths of the "Placement" Grid (originally 34)  and its first Column, and "Over_back" Border (also 34):

<Grid x:Name="Placement"
    Width="34">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="23" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Border x:Name="Over_back"
        Opacity="0"
        Height="25"
        CornerRadius="1"
        Background="{StaticResource ColorPicker_ButtonBackground_MouseOver}"
        BorderBrush="{StaticResource ColorPicker_ButtonBorder_MouseOver}"
        BorderThickness="1"
        Width="34"
        Grid.ColumnSpan="2">
        <Border CornerRadius="0"
            BorderThickness="1"
            BorderBrush="{StaticResource ColorPicker_ButtonInnerBorder_MouseOver}" />
    </Border>

    <Button x:Name="LeftButton"
        Style="{TemplateBinding ColorButtonStyle}"
        HorizontalContentAlignment="Center" />

    <ToggleButton Grid.Column="1"
        x:Name="ToggleButtonElement"
        IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
        Style="{TemplateBinding ExpanderButtonStyle}" Cursor="Hand" />
</Grid>

You can find the default Q2 Style /Template  modified in the attachment. Please let us know if you need further assistance on this. We would be glad to help you.

<Grid x:Name="Placement"
                    Width="60">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Border x:Name="Over_back"
                        Opacity="0"
                        Height="25"
                        CornerRadius="1"
                        Background="{StaticResource ColorPicker_ButtonBackground_MouseOver}"
                        BorderBrush="{StaticResource ColorPicker_ButtonBorder_MouseOver}"
                        BorderThickness="1"
                        Width="60"
                        Grid.ColumnSpan="2">
                        <Border CornerRadius="0"
                            BorderThickness="1"
                            BorderBrush="{StaticResource ColorPicker_ButtonInnerBorder_MouseOver}" />
                    </Border>

Best wishes,
Petar Mladenov
the Telerik team