Apply Css for Silverlight controls - WPF Discussion Boards

Setting Label.Content via attached property [SOLVED]

26-Jun-09 15:38

See OP - I found out what it was.

"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass..." - Dale Earnhardt, 1997
-----
"...the staggering layers of obscenity in your statement make it a work of art on so many levels." - Jason Jystad, 10/26/2001

#realJSOP26-Jun-09 5:01

26-Jun-09 5:01

I have the following line in a XAML style:

<Setter Property="udpcontrols:UDPTelerikGridView.TitleTextContent" Value="Search Results" />

In the custom control class, the attached property is defined like so:

//--------------------------------------------------------------------------------
public static readonly DependencyProperty TitleTextContentProperty = 
                       DependencyProperty.RegisterAttached("TitleTextContent", 
                                                           typeof(ContentControl), 
                                                           typeof(UDPTelerikGridView));

public static void SetTitleTextContent(UIElement element, ContentControl value)
{
	element.SetValue(TitleTextContentProperty, value);
}

public static ContentControl GetTitleTextContent(UIElement element)
{
	return (ContentControl)element.GetValue(TitleTextContentProperty);
}

And I have this code in the OnApplyTemplate method:

Label titleText = base.GetTemplateChild("PART_Title") as Label;
if (titleText != null)
{
	titleText.Content    = GetTitleTextContent(this);
}

The WPF designer is telling me this:

Error 2 - 'Search Results' is not a valid value for the 'Comet.UDPControls.UDPTelerikGridView.TitleTextContent' property on a Setter.

I'm off to google (yet again), but I thought I'd post this in advance. Anyone have any ideas?

========================

Solution - I changed the attached property type from ContentControl to object.

modified on Saturday, June 27, 2009 9:43 AM

Gideon Engelberth26-Jun-09 9:49

Gideon Engelberth

26-Jun-09 9:49

It looks to me that you are trying to set the TitleTextContent property (of type ContentControl) with a String value. As the error message says, a String is not a valid value for a ContentControl.

Perhaps you meant to declare the property as Object?

#realJSOP26-Jun-09 15:42

26-Jun-09 15:42

The reason I was doing that is because I thought WPF was smart enough to make the call. Afterall, setting Label.Content in CS or in XAML can be done like so:

Label.Content = "my string";

<Label Content="my string" />

In both instances, the Content property is *still* a ContentControl.

Gideon Engelberth26-Jun-09 15:56

Gideon Engelberth

26-Jun-09 15:56

Actually, it's not. Looking in the object browser shows that the Content property is of type Object. Perhaps you are thinking of how the Content property is *on* ContentControl?

#realJSOP26-Jun-09 23:57

Apply Css for Silverlight controls

26-Jun-09 23:57

Yeah, I found that out. I changed it all to object, and it worked.

pavanip25-Jun-09 1:11

pavanip

25-Jun-09 1:11

Hi,

I want to apply "Css" for Silverlight image control.I am having one silverlight image control in that left button down event i have to open asp.net form.For that aspx page i want to apply styles while opening that page.In left button down event i am calling java script function to call that aspx page.But from where i have to apply styles to open that page.
If i use anchor tag to open popup window in normal aspx page I can use the following line to work it properly.

<a style="font-family:Verdana; font-size:12px; font-weight:bold; text-decoration:none; color:#ffffff;" href="Contactus.aspx?TB_iframe=true&height=500&width=600" class="thickbox">Contact us</a>
Here I am using class="thickbox" css class.
But for now i want to open popup from code behind for that i have written following code in silverlight image control code behind.
HtmlPage.Window.Invoke("login");
And I am calling that javascript function in aspx page like this.
<script type="text/javascript">
function login() {
var url = "http://219.91.199.132/Gateway/Login.aspx";
window.open(
"UserLogin.aspx", 'window', 'width=630,height=620,background=silver,menubar=no, resizable=no')
}
</
script>
Can anyone please help me how to apply css for silverlight controls.

Thanks in advance
Pavani

Re: Apply Css for Silverlight controls

Mark Salsbery29-Jun-09 9:31

Mark Salsbery

29-Jun-09 9:31

CSS has nothing to do with Silverlight.

Try asking on the Web Development board Smile | :)

Mark

Mark Salsbery
Microsoft MVP - Visual C++
Java | [Coffee]

Re: Apply Css for Silverlight controls

Jeremy Likness1-Jul-09 8:40

Jeremy Likness

1-Jul-09 8:40

As mentioned, there is no CSS styling to Silverlight controls as they are rendered inside the "Silverlight sandbox" in the browser.

If you are looking to have a way to style controls, you should look at the Style element for your purposes. This allows you to create generic styles and then apply them to your controls, sort of the Silverlight "CSS equivalent."

Re: Apply Css for Silverlight controls

PumbaPumba21-Feb-11 0:33

PumbaPumba

21-Feb-11 0:33

One hack is to use 'initParams' to send these style values to silverlight control. There, you convert them into styles and apply them.

Conditional XAML

krishnan.s24-Jun-09 22:01

krishnan.s

24-Jun-09 22:01

Hi,
My scenario is like this.

1. I will get the language setting from my settings file.
2. I need to display my control text based on the language setting either in English or other language.

Is it possible to prepare a conditional XAML for the same scenario.

For example:
Can i set the content based on some setting for the Template below

Thanks

Re: Conditional XAML

ABitSmart24-Jun-09 22:10

ABitSmart

24-Jun-09 22:10

Take a look here Karl,Josh[^] and here MSDN[^]

WPF Toolkit DatePicker/Calender issue

bonkers12324-Jun-09 21:26

24-Jun-09 21:26

Hi,

I have a DatePicker, where I set the CalendarStyle (I'm using mvvm). The issue is, when I select a day on the calender, nothing happens (Looks like the Click event just never fires, or something.)

The Control looks as follow:

<tool:DatePicker Grid.Column="1" Grid.Row="8" SelectedDate="{Binding BirthDate}" CalendarStyle="{DynamicResource CalenderStyleNew}"></tool:DatePicker>

Where the style looks as follow:

<Style TargetType="Controls:Calendar" x:Key="CalenderStyleNew">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Controls:Calendar">
          <StackPanel HorizontalAlignment="Center" x:Name="Root">
            <Controls:Calendar x:Name="Calendar" SelectedDate="{TemplateBinding SelectedDate}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
              <Controls:Calendar.CalendarDayButtonStyle>
                <Style>
                  <Setter Property="Button.Height" Value="50"></Setter>
                  <Setter Property="Button.Width" Value="50"></Setter>
                  <Setter Property="Button.FontSize" Value="20"></Setter>
                </Style>
              </Controls:Calendar.CalendarDayButtonStyle>
              <Controls:Calendar.CalendarButtonStyle>
                <Style>
                  <Setter Property="Button.Height" Value="50"></Setter>
                  <Setter Property="Button.Width" Value="50"></Setter>
                  <Setter Property="Button.FontSize" Value="20"></Setter>
                </Style>
              </Controls:Calendar.CalendarButtonStyle>
            </Controls:Calendar>
          </StackPanel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

I need the buttons bigger, because it's a touch screen app... Test this in your app, and you'll see, nothing happens when you select a day...

Any help would be much appreciated.

Kind regards,
Hugo

bonkers12324-Jun-09 22:58

24-Jun-09 22:58

ok, after A LOT of struggling, I managed to make a work around... but, it's not pretty !!! An easier solution would be much appreciated.

What I did, was the following:

<Controls:DatePicker Grid.Column="1" Grid.Row="6" SelectedDate="{Binding BirthDate}" ViewModels:EmployeeViewModel.DatePickerGotFocus="{Binding}">
            <Controls:DatePicker.CalendarStyle>
              <Style TargetType="Controls:Calendar">
                <Setter Property="Template">
                  <Setter.Value>
                    <ControlTemplate TargetType="Controls:Calendar">
                      <StackPanel HorizontalAlignment="Center" x:Name="Root">
                        <Controls:Calendar x:Name="Calendar" ViewModels:EmployeeViewModel.OnCalenderLoaded="{Binding}" SelectedDate="{Binding BirthDate}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                          <Controls:Calendar.CalendarDayButtonStyle>
                            <Style>
                              <Setter Property="Button.Height" Value="50"></Setter>
                              <Setter Property="Button.Width" Value="50"></Setter>
                              <Setter Property="Button.FontSize" Value="20"></Setter>
                            </Style>
                          </Controls:Calendar.CalendarDayButtonStyle>
                          <Controls:Calendar.CalendarButtonStyle>
                            <Style>
                              <Setter Property="Button.Height" Value="50"></Setter>
                              <Setter Property="Button.Width" Value="50"></Setter>
                              <Setter Property="Button.FontSize" Value="20"></Setter>
                            </Style>
                          </Controls:Calendar.CalendarButtonStyle>
                        </Controls:Calendar>
                      </StackPanel>
                    </ControlTemplate>
                  </Setter.Value>
                </Setter>
              </Style>
            </Controls:DatePicker.CalendarStyle>
          </Controls:DatePicker>

Then I made attached properties for the DatePicker and Calendar as follow:

private Calendar _calender;
    private DatePicker _datePicker;

    public static object GetDatePickerGotFocus(DependencyObject obj)
    {
      return (object)obj.GetValue(DatePickerGotFocusProperty);
    }

    public static void SetDatePickerGotFocus(DependencyObject obj, object value)
    {
      obj.SetValue(DatePickerGotFocusProperty, value);
    }

    // Using a DependencyProperty as the backing store for DatePickerGotFocus.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DatePickerGotFocusProperty =
        DependencyProperty.RegisterAttached("DatePickerGotFocus", typeof(object), typeof(EmployeeViewModel), new UIPropertyMetadata(OnDatePickerGotFocus));

    private static void OnDatePickerGotFocus(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      DatePicker datePicker = d as DatePicker; //d.GetValue(FocusEditProperty) as TextBox;
      EmployeeViewModel model = e.NewValue as EmployeeViewModel;
      if (datePicker != null && model != null)
      {
        model._datePicker = datePicker;
      }
    }


    public static object GetOnCalenderLoaded(DependencyObject obj)
    {
      return (object)obj.GetValue(OnCalenderLoadedProperty);
    }

    public static void SetOnCalenderLoaded(DependencyObject obj, object value)
    {
      obj.SetValue(OnCalenderLoadedProperty, value);
    }

    // Using a DependencyProperty as the backing store for OnCalenderLoaded.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty OnCalenderLoadedProperty =
        DependencyProperty.RegisterAttached("OnCalenderLoaded", typeof(object), typeof(EmployeeViewModel), new UIPropertyMetadata(OnCalenderLoaded));

    private static void OnCalenderLoaded(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      Calendar calendar = d as Calendar; //d.GetValue(FocusEditProperty) as TextBox;
      EmployeeViewModel model = e.NewValue as EmployeeViewModel;
      if (calendar != null && model != null)
      {
        model._calender = calendar;
      }
    }

And then I set the visibility as follows:
public DateTime _birthDate;

public DateTime BirthDate
   {
     get { return _birthDate; }
     set
     {
       _birthDate = value;
       OnPropertyChanged("BirthDate");
       if (_calender != null)
       {
         _calender.Visibility = Visibility.Hidden;
         _datePicker.GotFocus += new RoutedEventHandler(_datePicker_GotFocus);
       }
     }
   }

   private void _datePicker_GotFocus(object sender, RoutedEventArgs e)
   {
     _calender.Visibility = Visibility.Visible;
     etc..

bonkers12325-Jun-09 1:40

25-Jun-09 1:40

lol, I over complicated this a bit. The final solution I made was as follow:

<tool:DatePicker Grid.Column="1" Grid.Row="8" SelectedDate="{Binding BirthDate}" ViewModels:PatronViewModel.DatePickerGotFocus="{Binding}" Height="34" FontSize="18">
           <tool:DatePicker.LayoutTransform>
              <ScaleTransform ScaleY="1.5" ScaleX="1.5"></ScaleTransform>
            </tool:DatePicker.LayoutTransform>
            <tool:DatePicker.CalendarStyle>
              <Style TargetType="tool:Calendar">
                <Setter Property="Template">
                  <Setter.Value>
                    <ControlTemplate TargetType="tool:Calendar">
                      <StackPanel HorizontalAlignment="Center" x:Name="Root">
                        <tool:Calendar x:Name="Calendar" ViewModels:PatronViewModel.OnCalenderLoaded="{Binding}" SelectedDate="{Binding BirthDate}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                          <tool:Calendar.LayoutTransform>
                            <ScaleTransform ScaleX="2" ScaleY="2"></ScaleTransform>
                          </tool:Calendar.LayoutTransform>
                        </tool:Calendar>
                      </StackPanel>
                    </ControlTemplate>
                  </Setter.Value>
                </Setter>
              </Style>
            </tool:DatePicker.CalendarStyle>
          </tool:DatePicker>

So by simply scaling the DatePicker, I got a cool touch screen DatePicker....

Member 342384716-Nov-09 9:29

Member 3423847

16-Nov-09 9:29

I tried your code above. For some reason, when I select a date from the calendar popup, it doesn't close the popup or select a date. I removed all Bindings since I don't have a viewmodel. I am just trying this out before putting it in my project.

bonkers12323-Nov-09 0:20

23-Nov-09 0:20

I remember having this problem.... I had to do some magic on the actual date time by hiding and showing the actual boxes....

Jimmy Carter23-Dec-09 9:57

Jimmy Carter

23-Dec-09 9:57

I have the same problem (selecting date does nothing and I am not using view model) I was hoping you could elaborate on the "magic" that you used to resolve this problem. Thanks.

bonkers12312-Jan-10 2:07

12-Jan-10 2:07

You don't even want to know what I had to do to fix this !!!! It's INSANE !