This is a migrated thread and some comments may be shown as answers.

ExpanderButtonStyle Not Working

1 Answer 49 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
centuit
Top achievements
Rank 1
centuit asked on 26 Oct 2011, 07:40 PM
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

1 Answer, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 31 Oct 2011, 06:23 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
ColorPicker
Asked by
centuit
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Share this question
or