RadPickerBox PickerButtonStyle w Files

[Kris Kasias]

Hi,

To add more clarity, what I'm actually trying to do is update the style of the PickerButton itself; I don't really have a need for the textblock all I want to do is be clear to the user what colour they've selected.

Hopefully the simple app is clear on what I'm trying to do.  I've posted to my public DropBox as I can't upload as zip.

http://dl.dropbox.com/u/13446072/RadPickerSample.zip

Thanks,
KK

[Deyan]

Hi Kris,

Thanks for writing back and for the further clarifications.

I have managed to refactor your code and to make it work as you require. Please take a look at the following code snippet:

private void ApplicationBarInfo_ButtonClick(object sender, ApplicationBarButtonClickEventArgs e)
{
    Brush brushColor = new SolidColorBrush(Colors.Black);
    if (e.Button.Text.ToLower() == "ok")
    {
        // update highlight color (background)
        foreach (ToggleButton button in this.HighlightPanel.Children)
        {
            if (button.IsChecked == true)
            {
                brushColor = button.Background;
                break;
            }
        }
    }

  this.PB_ColorPicker.IsPopupOpen = false;

  Style newStyle = new Style();
  newStyle.TargetType = typeof(ToggleButton);
  Setter setter = new Setter();
  setter.Property = ToggleButton.BackgroundProperty;
  setter.Value = brushColor;
  newStyle.Setters.Add(setter);
  this.PB_ColorPicker.PickerButtonStyle = newStyle;
}

As you can see, I first store the background Brush of the checked toggle button in the popup and break out of the foreach loop. After that I use the stored brush to create a new style object with the proper setters and apply it to the style of the ToggleButton within the RadPickerBox control.

I hope this helps.

Do not hesitate to get back to us in case you have further questions or need assistance.

All the best,
Deyan
the Telerik team

[Kris Kasias]

Hi Deyan,

Your code worked great though I was a bit confused when I went to integrate it in to my project as I put the code BEFORE the line:

this.PB_ColorPicker.IsPopupOpen = false;

which will NOT work when setting the style of the PickerButtonStyle.  This line has to appear ahead of setting the style.  Not sure why but I confirmed it in my project just moving the one line.

Not sure if this is a typical behaviour of SL as I'm pretty new to it and WP7 but it seems weird to me.

Thanks again for the help,
KK

[Deyan]

Hello Kris,

Indeed, the behavior seems to be different in this case. Since I cannot currently say what might cause this I will investigate the case and get back to you as soon as I find an explanation.

Regards,
Deyan
the Telerik team

[Lindsay Miles]

Hello,

I'd like to extend this thread if I may...

I have a whole series of tool buttons I'm trying to set up and would like to use the PickerBox as these buttons as each has it's own PopupContent.

I want to use an icon(s) in the PickerButton(s) itself and not text. Each PickerButton should have it's own icon.

Have tried to add an ImageBrush to the telerikPrimitives:RadPickerBox.Content in xaml but that doesn't work.

Can you please advise?

Thanks

[Deyan]

Hi Lindsay,

If you want to add multiple buttons in the popup of RadPickerBox you should put them in a layout panel and add the layout panel as a content of the popup. I believe in your scenario a RadWrapPanel would suit your needs.

I hope this helps.

Regards,
Deyan
the Telerik team

[Lindsay Miles]

Sorry but that did not answer my question at all.

I know I can put buttons into a wrappannel and add them to pickbox content.

The PickerBox button itself (the thing you click to make a "box" popup) is what i want to add an image to NOT the buttons contained in the popup. I want to add an imag/icon to the PickerBox.content and NOT the popupcontent.

Something like this:

<telerikPrimitives:RadPickerBox IsFullScreen="True" x:Name="playerPicker" Header="Player Selector"

    HeaderStyle="{StaticResource HeaderStyle}"

    ApplicationBarInfo="{StaticResource PickerAppBar}">

    <telerikPrimitives:RadPickerBox.Content>

        <ImageBrush ImageSource="/ProtoApp;component/Images/circle.png" />

    </telerikPrimitives:RadPickerBox.Content>

....

</telerikPrimitives:RadPickerBox>

Can this be done in any way? I cannot get this to work...

Thanks

[Deyan]

Hello Lindsay,

Thanks for writing back and sorry for the misunderstanding.

Instead of using ImageBrush, you should use the Image class. ImageBrush is used for drawing and is practically not a visual element that can be put in the visual tree.

I have prepared a sample project that adds an image into the clickable portion of RadPickerBox for your reference.

Let me know if you need further assistance with this.

Best wishes,
Deyan
the Telerik team

[Lindsay Miles]

Deyan, that ALMOST works...

Try this:

 

 

 

<telerikPrimitives:RadPickerBox IsFullScreen="True" Background="Transparent"

 

 

 

                                Opacity="0" Width="48" Height="48"

 

 

 

                                x:Name="playerPicker" BorderThickness="1">

 

 

 

 

    <telerikPrimitives:RadPickerBox.Content>

 

 

 

 

        <Image Source="/ProtoApp;component/Images/circle.png" />

 

 

 

 

    </telerikPrimitives:RadPickerBox.Content>

 

 

 

 

    <telerikPrimitives:RadPickerBox.PopupContent>

 

 

 

 

        <Grid Background="{StaticResource PhoneChromeBrush}">

 

 

 

 

            <Grid.RowDefinitions>

 

 

 

 

                <RowDefinition Height="Auto"/>

 

 

 

 

                <RowDefinition Height="*"/>

 

 

 

 

            </Grid.RowDefinitions>

etc etc

 

I'm trying to have a 24x24 or 32x32 image show up just as if on a regular button, which I've done already but it won't in the PickerBox Button.

Paste my xaml into the sample proj. and you'll see the image is either not rendered or is too small due to sizing issues.

Let me know if you actually can get a 24x24 OR 32x32 image to display.

Cheers,

Lindsay

[Deyan]

Hi Lindsay,

Here is a modified version of the project I have attached earlier. In this version I am displaying two images, one 24x24 pixels and another one 32x32 pixels in the RadPickerBox's button. This works as expected on my side.

Take a look at the project and let me know if you need further assistance with this.

Regards,
Deyan
the Telerik team

[Lindsay Miles]

Deyan, we're getting somewhere! thanks!

Couple other questions:

How can I reduce the size/width of the space all around the image so that the image FILLS the button?

I'd like the PickerBox to be the size of the image only, no borders, no edges but only the size of the image. Other buttons in my app are 48x48 holding a 32x32 image. When I set the PickerBox to 48x48, the image is reduced to a dot in the "grey" button.

Also, I tried changing the background and foreground colours to remove the "grey" in the button but find that changing opacity removes the button "grey". Problem is, it removes/hides the image too!

Please advise!

Thanks

[Deyan]

Hi Lindsay,

You can define a custom style targeting the ToggleButton type and set it to the PickerButtonStyle property of the RadPickerBox to modify the appearance of the inline part of the RadPickerBox control. Here is a sample XAML snippet that removes the padding and the border of the control:

<telerikPrimitives:RadPickerBox  VerticalAlignment="Top">
            <telerikPrimitives:RadPickerBox.Content>
                <StackPanel Orientation="Horizontal">
                <Image Source="Images/MyImage_24x24.png" Stretch="None"/>
                    <Image Source="Images/MyImage_32x32.png" Stretch="None"/>
                </StackPanel>
            </telerikPrimitives:RadPickerBox.Content>
            <telerikPrimitives:RadPickerBox.PickerButtonStyle>
                <Style TargetType="ToggleButton">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="BorderThickness" Value="0"/>
                </Style>
            </telerikPrimitives:RadPickerBox.PickerButtonStyle>
        </telerikPrimitives:RadPickerBox>

Please note that RadPickerBox uses a ToggleButton for its inline part. When you create a custom style and assign it to the PickerButtonStyle property, you should target the ToggleButton type.

You can also extract the default style for the ToggleButton by using Expression Blend and modify the visual states if you wish.

I hope this helps.

All the best,
Deyan
the Telerik team