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

DatePicker Opacity question

12 Answers 116 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Jarrod
Top achievements
Rank 1
Jarrod asked on 01 Mar 2011, 11:29 AM
Hi There,

I am using the RadDatePicker control to set the date on a column in a RadGridView. The problem I am having is that the control is displaying as transparent, which makes the control hard to use. I have changed the opacity to 100 but it doesn't seem to make a difference.

I am using the transparent theme for the grid. Is there a way for me to set the opacity of the date control separately? Sorry this is probably a very obvious thing, but I am rather new to Silverlight. I have included a sample of the xaml below.

Thanks and Regards, J

                        <telerik:GridViewDataColumn DataMemberBinding="{Binding EstimatedCloseDate}" Header="Estimated Close Date" TextAlignment="Center" >
                            <telerik:GridViewDataColumn.CellEditTemplate>
                                <DataTemplate>
                                    <telerik:RadDatePicker SelectedDate="{Binding EstimatedCloseDate, Mode=TwoWay}" Background="Black" Opacity="100" />
                                </DataTemplate>
                            </telerik:GridViewDataColumn.CellEditTemplate>
                        </telerik:GridViewDataColumn>

Thanks and Regards, J



12 Answers, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 03 Mar 2011, 10:05 AM
Hi Jarrod,

You should set opacity to the calendar in your RadDatePicker, this can be achieved with CalendarStyle property like this:

- create the style:

Copy Code
Copy Code
Copy Code
<UserControl.Resources>   
    <Style x:Name="calStyle" TargetType="Control">
        <Setter Property="Opacity" Value="100"  />
    </Style>
</UserControl.Resources>

and set it to CalendarStyle:

Copy Code
Copy Code
Copy Code
<telerik:GridViewDataColumn.CellEditTemplate>
    <DataTemplate>
        <telerik:RadDatePicker Background="Black"  Opacity="100" CalendarStyle="{StaticResource calStyle}" />
    </DataTemplate>
</telerik:GridViewDataColumn.CellEditTemplate>

Hope this helps.

Greetings,
Yana
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Jarrod
Top achievements
Rank 1
answered on 03 Mar 2011, 10:38 AM
Hi Yana,

I have tried this but it has not made a difference. Please see inset code.

<Style x:Name="calendarStyle" TargetType="Control">
    <Setter Property="Opacity" Value="100"/>
</Style>

and 

<telerik:GridViewDataColumn DataMemberBinding="{Binding EstimatedCloseDate}" Header="Estimated Close Date" TextAlignment="Center" DataFormatString="{} {0:dd, MMM, yyyy}">
    <telerik:GridViewDataColumn.CellEditTemplate>
        <DataTemplate>
            <telerik:RadDatePicker SelectedDate="{Binding EstimatedCloseDate, Mode=TwoWay}" CalendarStyle="{StaticResource calendarStyle}" />
        </DataTemplate>
    </telerik:GridViewDataColumn.CellEditTemplate>
</telerik:GridViewDataColumn>

It is still transparent. Please see an example attached.
0
Yana
Telerik team
answered on 07 Mar 2011, 09:37 AM
Hi Jarrod,

I've tested the approach and it worked as expected at our side,  you can find attached my test files, please download the attachment and give it a try.

Kind regards,
Yana
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Mark
Top achievements
Rank 1
answered on 19 Oct 2011, 01:26 PM
Jarrod,

I was just chasing down the same issue in WPF and the provided code did not solve the issue for me either. What ended up working for me was, in the 'calStyle' styling block, to set the background colour. In my case I set it to 'silver' and the calendar became opaque. (see attachments).

Cheers,
Mark.
0
Kelly
Top achievements
Rank 1
answered on 31 Jan 2012, 01:40 AM
I too have tried the code above and in the zip file with no result. I'm using a RadDateTimePicker with the Transparent theme on 2011.3.1227.1040. I set both the CalendarStyle and the ClockStyle using various values, and don't see any difference. The picker opens over a very busy GridView and is pretty much unreadable. As Mark noted, it works if you also set the background, but I don't want to set the background, or I wouldn't have used the transparent style. Is there something else to try to just set the Opacity?

Thank you,

Kelly
0
Yana
Telerik team
answered on 02 Feb 2012, 02:47 PM
Hi Kelly,

I've tested the project with the latest release and it works without a problem.  Please open a support ticket and send us a simplified version of your project where we can observe the issue. Thanks in advance

Greetings,
Yana
the Telerik team

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

0
Kelly
Top achievements
Rank 1
answered on 02 Feb 2012, 04:51 PM
Yana, I submitted a project under ticket id 507961. Thanks!
0
Yana
Telerik team
answered on 03 Feb 2012, 02:16 PM
Hello Kelly,

I've checked the project and you are right - really setting Opacity is not enough to fix the issue with the DatePicker, you should set Background as well.

Greetings,
Yana
the Telerik team

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

0
Mike Lee
Top achievements
Rank 1
answered on 23 Aug 2012, 04:21 PM
Hi guys, wouldn't it be better if we implement implicit styling on the datepicker, instead of having to put a CalendarStyle for every datepicker we use?

This solution is actually a hybrid of using explicit and implicit styling:

This is the explicit style for the CalendarStyle:
    <Style x:Name="CalPickerStyle" TargetType="Control">
        <Setter Property="Opacity" Value="100"/>
        <Setter Property="Background" Value="Silver" />
    </Style>

Implicit style for RadDatePicker:

    <Style TargetType="telerik:RadDatePicker">
        <Setter Property="CalendarStyle" Value="{StaticResource CalPickerStyle}"/>
    </Style>


This is also a problem with Transparent Comboboxes, so the same approach:

    <Style x:Name="ComboDropStyle" TargetType="Control">
        <Setter Property="Opacity" Value="100"/>
        <Setter Property="Background" Value="White" />
    </Style>

    <Style TargetType="telerik:RadComboBox">
        <Setter Property="ItemContainerStyle" Value="{StaticResource ComboDropStyle}"/>
    </Style>

Hope this helps some of you.  I know it saved me time of not having to edit 100+ pages that use Comboboxes and DatePickers!

Mike Lee
http://www.eikospartners.com
0
Yana
Telerik team
answered on 24 Aug 2012, 07:11 AM
Hello Mike,

Since Q1 SP1 release you can use implicit styles to style our controls. More information about this you can find here.

Greetings,
Yana
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Cheri
Top achievements
Rank 1
answered on 13 Nov 2012, 09:10 PM
Hello,

Recently I used Mike's approach to set the background on my datepicker.  Since I've upgraded to 2012.3.1106.1050 this no longer works.  the background is transparent again.

What should I do to fix this?

Thanks,
Cheri
0
Yana
Telerik team
answered on 19 Nov 2012, 02:29 PM
Hello Cheri,

We have tried to reproduce the issue but without much success. I have attached our test project for a reference. Note that when using implicit styles and customize some properties of the controls,  you should base the new styles on the default values. Also make sure to reference the NoXaml assemblies.

Kind regards,
Yana
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
DatePicker
Asked by
Jarrod
Top achievements
Rank 1
Answers by
Yana
Telerik team
Jarrod
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Kelly
Top achievements
Rank 1
Mike Lee
Top achievements
Rank 1
Cheri
Top achievements
Rank 1
Share this question
or