Skip Navigation LinksHome / Tips

Tips

+
Page 
Items Resolution

  • Using Blur and DropShadow effects in Silverlight 3

    4 comments  /  posted by  Nikolay Raychev  on  Apr 02, 2009 (11 months ago)
    Tags: Pixel Shaders , Blur , DropShadow , Silverlight , XAML , Nikolay Raychev , Silverlight 3
    Silverlight 3 comes with two built in Pixel Shaders:

    We have the following image:



    We want to blur it:

    <Image Width="300"   
        Source="http://terraristic.net/photos/  
        Brachypelma_albiceps/Brachypelma_albiceps_1.jpg"> 
        <Image.Effect>
            <BlurEffect Radius="8"></BlurEffect>
        </Image.Effect>
    </Image> 

    We have the following result:



    Note the Radius parameter.
    Read more ...
    Share


  • Enable multiple selection in Silverlight 3 ListBox

    1 comments  /  posted by  Nikolay Raychev  on  Apr 02, 2009 (11 months ago)
    Tags: Multiple Selection , ListBox , Silverlight , XAML , Nikolay Raychev , Silverlight 3
    In Silverlight 3 you can make multiple selections in a ListBox. You just need to set the SelectionMode parameter:

    <ListBox Margin="5" x:Name="lbTasks"   
        ItemsSource="{Binding Tasks, ElementName=MainPageView}"   
        SelectionMode="Multiple">  
        <ListBox.ItemTemplate> 
            <DataTemplate> 
                <StackPanel Orientation="Horizontal" Margin="2">  
                    <TextBlock FontWeight="Bold" FontSize="13"   
                        Foreground="#ff006882" Text="{Binding Text}">  
                    </TextBlock> 
                </StackPanel> 
            </DataTemplate> 
        </ListBox.ItemTemplate> 
    </ListBox> 

    You have 3 options for the SelectionMode:
    • Single - you can select only one item.
    Read more ...
    Share

  • How to style the caret in Silverlight 3

    1 comments  /  posted by  Nikolay Raychev  on  Mar 25, 2009 (11 months ago)
    Tags: Caret , CaretBrush , Silverlight , XAML , Nikolay Raychev , Silverlight 3
    It's very easy to style the caret in Silverlight 3. Look at that huge TextBox with a caret in the rainbow colors:



    You just need to set the CaretBrush property:

    <TextBox FontSize="50" Width="100" Height="80">  
        <TextBox.RenderTransform> 
            <ScaleTransform ScaleX="6" ScaleY="1"/>  
        </TextBox.RenderTransform> 
        <TextBox.CaretBrush>
            <LinearGradientBrush x:Name="backgroundLinearGradientBrush"
                MappingMode="RelativeToBoundingBox"
                    StartPoint="0,0" EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Color="Red" Offset="0" />
                    <GradientStop Color="Orange" Offset="0.167" />
                    <GradientStop Color="Yellow" Offset="0.333" />
                    <GradientStop Color="Green" Offset="0.5"/>
                    <GradientStop Color="Blue" Offset="0.667" />
                    <GradientStop Color="Indigo" Offset="0.833" />
                    <GradientStop Color="Violet" Offset="1" />
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </TextBox.CaretBrush> 
    </TextBox> 

    You can use any Silverlight supported Brush.
    Read more ...
    Share

  • XAML Element Binding

    2 comments  /  posted by  Emil Stoychev  on  Mar 23, 2009 (11 months ago)
    Tags: Element Binding , XAML , Silverlight 3 , Emil Stoychev

    Silverlight 3 enables property binding to CLR objects and other UI components via XAML – UI to UI binding. It is useful in a lot of scenarios and saves time for both developers and designers.

    Example

    Get Microsoft Silverlight

    Download source code

    Syntax

    {Binding Value, ElementName=MySlider}

    where Value is property of a CLR object and MySlider is the name of this object

    Hope that helps!

    Share

  • Tip: Cascading Styles in Silverlight 3

    3 comments  /  posted by  Emil Stoychev  on  Mar 23, 2009 (11 months ago)
    Tags: BasedOn Styles , Silverlight 3 , Emil Stoychev

    Like in CSS you can now cascade styles in Silverlight 3 too. You can append and/or override values by basing one style on another. In this way you can built a powerful and reusable set of styles to apply in your Silverlight applications.

    Syntax

    Style cascading is accomplished by using the new BasedOn attribute of the Style class.

       1: <Style x:Name="Headline" TargetType="TextBlock">
       2:     <Setter Property="FontFamily" Value="Verdana" />
       3:     <Setter Property="FontSize" Value="14" />
       4: </Style>
       5: <Style x:Name="ImportantHeadline" TargetType="TextBlock" 
       6:     BasedOn="{StaticResource Headline}">
       7:     <Setter Property="Foreground" Value="Red" />
       8: </Style>        
       9: <Style x:Name="HomePageHeadline" TargetType="TextBlock" 
      10:     BasedOn="{StaticResource Headline}">
      11:     <Setter Property="FontSize" Value="18" />
      12: </Style>

    Here we have a base style Headline that targets TextBlock elements and defines values for FontFamily and FontSize.

    Read more ...
    Share

  • Detecting Network Change in Silverllight 3 Application

    1 comments  /  posted by  Nikolay Raychev  on  Mar 19, 2009 (11 months ago)
    Tags: Network Change , Silverlight , C# , Nikolay Raychev , Silverlight 3

    In Silverlight 3 you are able to check if an internet connection is present. You can also detect network changes.

    See also:
    Silverlight 3 as a Desktop Application (Out-of-Browser Applications)

    Network availability checking:

    if (System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable())  
    {  
        this.InitTasks();  
    } 

    Network change detection:

    NetworkChange.NetworkAddressChanged += new 
    NetworkAddressChangedEventHandler(NetworkChangedCallback); 

     

    private void NetworkChangedCallback(object sender, EventArgs e)  
    {  
        if (System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable())  
        {  
            this.InitTasks();  
        }  
    } 

    Demo

    Read more ...
    Share

  • Tip: How to handle the MouseLeftButtonDown and MouseLeftButtonUp events of the Button control?

    2 comments  /  posted by  Martin Mihaylov  on  Nov 28, 2008 (more than a year ago)
    Tags: Silverlight , Button , MouseLeftButtonDown , MouseLeftButtonUp , Click

    Have you ever noticed that the MouseLeftButtonDown and MouseLeftButtonUp events are not fired when a Silverlight button is clicked? The reason for this is that the button handles these two events itself by overriding the OnMouseLeftButtonDown  and the OnMouseLeftButtonUp  handlers. In the OnMouseLeftButtonDown  override the Click event is raised and the MouseLeftButtonDown event is marked as handled so it couldn't bubble in the visual tree. The OnMouseLeftButtonUp  override also marks the MouseLeftButtonUp  as handled.

    Read more ...
    Share

  • Tip: Avoid parameters without values in the object element

    0 comments  /  posted by  Martin Mihaylov  on  Nov 28, 2008 (more than a year ago)
    Tags: Silverlight , object , issue , parameter

    When using the object element to display our Silverlight application, we can use parameters to configure it (source, onerror, background, minRuntimeVersion and etc.):

    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
        <param name="source" value="ClientBin/Issues.xap"/>
        <param name="onerror" value="onSilverlightError" />
        <param name="background" value="white" />
        <param name="minRuntimeVersion" value="2.0.31005.0" />
        <param name="autoUpgrade" value="true" />
        <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
             <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
        </a>
    </object>

    Some of them are predefined in the automatically created TestPages, but we can also add additional parameters like initParams, onload and etc.

    Read more ...
    Share

  • Tip: What is the difference between styling and skinning

    0 comments  /  posted by  Ivan Dragoev  on  Nov 14, 2008 (more than a year ago)
    Tags: Silverlight , Stilyng and skinning , Control style , control skin
    Styling control means to apply to the control's properties predefined in the style values. Styling deals mainly with properties like Foreground, Background, FontStyle and FontSize, etc.
     
    Skinning, on the other hand, allows you to build your own presentation for that control by defining control template. Thus, you are able to completely replace the standard presentation with another, which includes more visual elements, animations and other effects.
     
    That's it!
    Share

  • Tip: What is control skinning?

    0 comments  /  posted by  Ivan Dragoev  on  Nov 14, 2008 (more than a year ago)
    Tags: Silverlight , Skinning , Control Skin

    Skinning is a way to completely replace the look of your control. In order to do that, you have to define new template and set it to the Control.Template property.

    Building your own template allows you to make the control look and feel in the way you like. You might add new elements or remove the existing, you can also edit the visual states and transitions.

    In the example the button shape is changed. All animations are removed for simplicity.

       1: <UserControl.Resources>
       2:     <Style x:Key="myButtonTemplate" TargetType="Button">
       3:         <Setter Property="Template">
       4:             <Setter.Value>
       5:                 <ControlTemplate TargetType="Button">
       6:                     <Grid>
       7:                         <Path Margin="2"  x:Name="BackgroundGradient" Stretch="Fill" Stroke="#FF94C2D8" 
       8:                               StrokeThickness="2" Opacity="1"
       9:                               Data="M44,-135 L137,-136 L163.00137,-114.43846 L138.14738,-98.33696 L40.513062,-96.888382 L65.010727,-116.44418 z" >
      10:                               
      11:                             <Path.Fill>
      12:                                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      13:                                     <GradientStop Color="#FFA3AEB9" Offset="0"/>
      14:                                     <GradientStop Color="#FF8399A9" Offset="0.375"/>
      15:                                     <GradientStop Color="#FF718597" Offset="0.375"/>
      16:                                     <GradientStop Color="#FF617584" Offset="1"/>
      17:                                 </LinearGradientBrush>
      18:                             </Path.Fill>
      19:                         </Path>
      20:                         <ContentPresenter
      21:                             x:Name="contentPresenter"
      22:                             Content="{TemplateBinding Content}"
      23:                             ContentTemplate="{TemplateBinding ContentTemplate}"
      24:                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
      25:                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
      26:                             Margin="{TemplateBinding Padding}"/>
      27:                     </Grid>
      28:                 </ControlTemplate>
      29:             </Setter.Value>
      30:         </Setter>
      31:     </Style>
      32: </UserControl.Resources>

    That's it!

    Read more ...
    Share

Page