w3mentor
Learning web technologies simplified!
 
Home / C Sharp / Archive by category '.NET Silverlight'

.NET Silverlight

Underlining text in Silverlight

You can add underlining to any font by setting the TextDecorations property to Underline:

<TextBlock TextDecorations="Underline">Underlined text</TextBlock>

Embed font in Silverlight using StreamResourceInfo in Code behind

To embed fonts, you add the font file (typically, a file with the extension .ttf) to your application and set Build Action to Resource.

StreamResourceInfo sri = Application. GetResourceStream( 
  new Uri("FontTest;component/Myw3Font. ttf" , UriKind. Relative)) ; 
 
lbl.FontSource = new FontSource(sri.Stream) ; 
lbl.FontFamily = new FontFamily("FFFont") ;

Embed true type font in silverlight and use it in textblock

To embed fonts, you add the font file (typically, a file with the extension .ttf) to your application and set Build Action to Resource.
To set the FontFamily property, you need to use this format:

FontFileName#FontName

For example, if you have a font file named Myw3Font.ttf and it includes a font named FFFont, you would use markup like this:

<TextBlock FontFamily="Myw3Font.ttf#FFFont" >This is an embedded font</TextBlock>

Set a font family on text in Silverlight

<TextBlock x: Name=" txt" FontFamily="Times New Roman" FontSize="18"> 
 Some Text</TextBlock>

or in code

txt.FontFamily = "Times New Roman"; 
txt.FontSize = "18";

We can use the full name of a typeface to get italic or bold, as shown below:

<TextBlock FontFamily=" Times New Roman Bold">Some Text</TextBlock >

Change color of text in silverlight

In Silverlight, text is colored black by default. You can change the color of your text using the Foreground property. You can set it using a color name in XAML:

<TextBlock x: Name="txt" Text="Hello World" Foreground="Red"></TextBlock>

or in code

txt.Foreground = new SolidColorBrush(Colors.Red);

Preserve space and new lines in Silverlight TextBlock

Developers can add the xml: space=”preserve” attribute to your TextBlock element, which tells the XAML parser to honor every space, tab, and hard return between the opening > character (which ends the start tag) and the closing < (which begins the end tag).

<TextBlock xml: space="preserve" 
>This is line 1. 
    This is an indented line 2. </TextBlock>

Line breaks in silverlight textblocks

You can use a LineBreak inside the TextBlock element, as shown here:

<TextBlock> 
    This is line 1. <LineBreak/> 
    This is line 2. 
</TextBlock>

This is equivalent to the br tag in HTML.

Check whether the Ctrl key is currently pressed in Silverlight (key modifiers)

When a key press occurs, you often need to know more than just what key was pressed, particularly modifiers such as Shift and Ctrl. To test for a Keyboard.Modifier, you use bitwise logic. For example, the following code checks whether the Ctrl key is currently pressed:

if ((Keyboard.Modifiers & ModifierKeys. Control) == ModifierKeys.Control) 
{ 
    message += "You are holding the Control key."; 
}

KeyDown, KeyUp, and TextChanged events in Silverlight

Declare textbox with events:

<TextBox KeyDown="txt_KeyDown" KeyUp="txt_KeyUp" 
 TextChanged="txt_TextChanged"></TextBox>

C# Code behind to handle these events:

private void txt_KeyUp(object sender, KeyEventArgs e) 
{ 
    string message = 
      " KeyUp " + 
      " Key: " + e. Key; 
    lstMessages.Items.Add(message); 
} 
 
private void txt_KeyDown(object sender, KeyEventArgs e) 
{ 
    string message = 
      " KeyDown " + 
      " Key: " + e. Key; 
    lstMessages.Items.Add(message); 
} 
 
private void txt_TextChanged(object sender, TextChangedEventArgs e) 
{ 
    string message = "TextChanged"; 
    lstMessages.Items.Add(message); 
}

Zooming with the mouse wheel in Silverlight

Declare grid within viewbox:

<UserControl x: Class="Examples.MouseWheelZoom" 
 xmlns="http: //schemas. microsoft. com/winfx/2006/xaml/presentation"  
 xmlns: x="http: //schemas. microsoft. com/winfx/2006/xaml"  
MouseWheel="Page_MouseWheel"> 
 
  <ScrollViewer VerticalScrollBarVisibility="Auto" 
   HorizontalScrollBarVisibility="Auto"> 
 
    <Viewbox x: Name="viewbox" Height="250" Width="350"> 
      <Grid Background="White" Height="250" Width=" 350"> 
        . .. 
      </Grid> 
    </Viewbox> 
 
  </ScrollViewer> 
</UserControl>

Code behind:

private void Page_MouseWheel(object sender, MouseWheelEventArgs e) 
{ 
    // The Delta is in units of 120, so dividing by 120 gives 
    // a scale factor of 1. 09 (120/110) . In other words, one 
    // mouse wheel notch expands or shrinks the Viewbox by about 9%. 
    double scalingFactor = (double) e. Delta / 110; 
 
    // Check which way the wheel was turned. 
    if (scalingFactor > 0) 
    { 
        // Expand the viewbox. 
        viewbox.Width *= scalingFactor; 
        viewbox.Height *= scalingFactor; 
    } 
    else 
    { 
        // Shrink the viewbox. 
        viewbox.Width /= -scalingFactor; 
        viewbox.Height /= - scalingFactor; 
    } 
}

Display the position of the mouse pointer in Silverlight

private void MouseMoved(object sender, MouseEventArgs e) 
{ 
    Point pt = e. GetPosition(this); 
    lblInfo.Text = 
      String. Format(" You are at ({0}, {1}) in page coordinates", 
      pt. X, pt. Y) ; 
}

Layering with ZIndex in Silverlight

You can promote any element to a higher level by increasing its ZIndex. That’s because higher ZIndex elements always appear over lower ZIndex elements.

<Button Canvas. Left=" 60" Canvas.Top="80" Canvas.ZIndex="1" Width="50" Height="50" 
 Content="(60,80) "></Button> 
<Button Canvas. Left=" 70" Canvas.Top="120" Width="100" Height="50" 
 Content="(70,120)" </Button>

Silverlight stackpanel with one TextBlock and four buttons example

The StackPanel is one of the simplest layout containers. It simply stacks its children in a single row or column. These elements are arranged based on their order.

<UserControl x: Class="Layout.ExStack" 
 xmlns="http: //schemas. microsoft. com/winfx/2006/xaml/presentation" 
 xmlns: x="http: //schemas. microsoft. com/winfx/2006/xaml"> 
  <StackPanel Background="White"> 
    <TextBlock Text=" A Button in Stackpanel"></TextBlock> 
    <Button Content=" Button 1"></Button> 
    <Button Content=" Button 2"></Button> 
    <Button Content=" Button 3"></Button> 
    <Button Content=" Button 4"></Button> 
  </StackPanel> 
</UserControl>

Create slightly rounded border around a basic button in Silverlight

This example adds a little bit or margin space around the border and the button.

<Border Margin="25"  Background=" LightYellow" 
 BorderBrush="SteelBlue" BorderThickness="8" CornerRadius=" 15"> 
  <Button Margin="10 Content="Click  Me"></Button> 
</Border>

Properties of the Border Class in Silverlight

Background
Sets a background that appears behind all the content in the border using a Brush object. You can use a solid color among other options.
BorderBrush
Sets the fill of the border that appears around the edge of the Border object, using a Brush object. The most straightforward approach is to use a SolidColorBrush to create a solid border.
BorderThickness
Sets the width (in pixels) of the border on each side. The BorderThickness property holds an instance of the System.Windows.Thickness structure, with separate components for the top, bottom, left, and right edges.
CornerRadius
Rounds the corners of your border. The greater the CornerRadius, the more dramatic the rounding effect is.
Padding
Adds spacing between the border and the content inside. (Margin adds spacing outside the border.)

Setting silverlight color in codebehind using color.fromargb function

int red = 0; int green = 255; int blue = 0; 
layoutRoot. Background = new SolidColorBrush(Color.FromArgb(255, red, green, blue) );

An alpha value of 255 is completely opaque, while 0 is completely transparent.

Core Layout Panels in Silverlight

StackPanel Places elements in a horizontal or vertical stack. This layout container is
typically used for small sections of a larger, more complex page.
WrapPanel
Places elements in a series of wrapped lines. In horizontal orientation, the WrapPanel lays items out in a row from left to right and then onto subsequent lines. In vertical orientation, the WrapPanel lays out items in a top-to-bottom column and then uses additional columns to fit the remaining items. This layout container is available in the Silverlight Tookit.

DockPanel
Aligns elements against an entire edge of the container. This layout container is available in the Silverlight Tookit.

Grid
Arranges elements in rows and columns according to an invisible table. This is one of the most flexible and commonly used layout containers.

Canvas
Allows elements to be positioned absolutely using fixed coordinates. This layout container is the simplest but least flexible.

Two-way binding of slider with a text box in Silverlight XAML

Declare slider:

<Slider x:Name="Myslider" Margin="3" 
 Minimum="1" Maximum="40" Value="10"> 
</Slider>

Declare textbox with twoway binding to slider:

<TextBox Text=" {Binding ElementName=Myslider, Path=Value, Mode=TwoWay}"> 
</TextBox>

Binding a slider control to a textblock using databinding in Silverlight XAML

Declare slider:

<Slider x:Name="Myslider" Margin="3" 
 Minimum="1" Maximum="40" Value=" 10"> 
</Slider>

The binding is defined in the TextBlock element. Instead of setting the FontSize using a literal value, you use a binding expression, as shown here:

<TextBlock Margin=" 10" Text="Simple Text" x: Name="lblSampleText" FontSize=" {Binding ElementName=Myslider, Path=Value}" > 
</TextBlock>

When the slider is changed, its value will affect the font size of the textblock font.

Accessing XAML User Resources in Code behind C#

<UserControl x: Class="MyApp.ResourceHierarchy" 
 xmlns="http: //schemas. microsoft. com/winfx/2006/xaml/presentation"  
 xmlns: x="http: //schemas. microsoft. com/winfx/2006/xaml"  
 Width="400" Height=" 300"> 
  <Grid x: Name="LayoutRoot" Background="White"> 
    <StackPanel> 
      <StackPanel.Resources> 
        <LinearGradientBrush x: Key="ButtonStylee"> 
          <GradientStop Offset="0.00" Color=" Yellow" /> 
          <GradientStop Offset="0.50" Color="White" /> 
          <GradientStop Offset="1.00" Color="Purple" />
       </LinearGradientBrush> 
      </StackPanel. Resources> 
      <Button Content=" Click Me First" Margin=" 5" 
      Name="btn_StyleMe"></Button> 
    </StackPanel> 
  </Grid> 
</UserControl>
LinearGradientBrush brush = (LinearGradientBrush) this.Resources["ButtonStylee"] ; 
 
// Swap the color order. 
Color color = brush.GradientStops[0]. Color; 
brush.GradientStops[0]. Color = brush. GradientStops[ 2] .Color; 
brush.GradientStops[2]. Color = color;
 
btn_StyleMe.foreground = brush;

Latest Tutorials & Code Snippets

Reference Guides

—