Silverlight 4 Borderless Windows

 If you’re creating a Silverlight Out-Of-Browser application then it’s pretty easy to turn off the default window chrome. Simply change the Window Style setting on your Silverlight project to “No Border” (via the Properties dialog –> Out of Browser Settings dialog). However, if you do that you need to take care of resizing, closing and dragging of the window.

In this example, I’m going to assume you have a master page that contains a navigation frame into which your application pages are loaded. This master page can contain all the logic to control your application window.

My master page looks like,

<navigation:Page xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"  x:Class="OutageNotices.ApplicationFrame"
          d:DesignWidth="640" d:DesignHeight="480"
          Title="Main Page" mc:Ignorable="d" SizeChanged="Page_SizeChanged">

   <Grid x:Name="LayoutRoot" MouseLeftButtonDown="Page_MouseLeftButtonDown">
       
       <Grid.Background>
           <ImageBrush ImageSource="/OutageNotices;component/Images/background.jpg" Opacity="0.03"/>
       </Grid.Background>

       <Grid.RowDefinitions>
           <RowDefinition Height="2"/>
           <RowDefinition Height="20"/>
           <RowDefinition Height="*"/>
           <RowDefinition Height="20"/>
           <RowDefinition Height="2"/>
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="2"/>
           <ColumnDefinition Width="20"></ColumnDefinition>
           <ColumnDefinition Width="*"></ColumnDefinition>
           <ColumnDefinition Width="20"></ColumnDefinition>
           <ColumnDefinition Width="3"/>
       </Grid.ColumnDefinitions>

       <!-- Borders -->
       <Rectangle Tag="Top" Fill="{StaticResource BorderBrush}"  Grid.Column="1" Grid.ColumnSpan="3" Cursor="SizeNS" MouseLeftButtonDown="border_MouseLeftButtonDown"></Rectangle>
       <Rectangle Tag="Bottom" Fill="{StaticResource BorderBrush}" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="4" Cursor="SizeNS" MouseLeftButtonDown="border_MouseLeftButtonDown"></Rectangle>
       <Rectangle Tag="Left" Fill="{StaticResource BorderBrush}" Grid.Row="1" Grid.RowSpan="3" Cursor="SizeWE" MouseLeftButtonDown="border_MouseLeftButtonDown"></Rectangle>
       <Rectangle Tag="Right" Fill="{StaticResource BorderBrush}" Grid.Row="1" Grid.RowSpan="3" Grid.Column="4" Cursor="SizeWE" MouseLeftButtonDown="border_MouseLeftButtonDown"></Rectangle>
       <Rectangle Tag="TopLeft" Fill="{StaticResource BorderBrush}" Cursor="SizeNWSE" MouseLeftButtonDown="border_MouseLeftButtonDown"></Rectangle>
       <Rectangle Tag="TopRight" Fill="{StaticResource BorderBrush}" Grid.Column="4" Cursor="SizeNESW" MouseLeftButtonDown="border_MouseLeftButtonDown"></Rectangle>
       <Rectangle Tag="BottomLeft" Fill="{StaticResource BorderBrush}" Grid.Row="4" Cursor="SizeNESW" MouseLeftButtonDown="border_MouseLeftButtonDown"></Rectangle>
       <Rectangle Tag="BottomRight" Fill="{StaticResource BorderBrush}" Grid.Row="4" Grid.Column="4" Cursor="SizeNWSE" MouseLeftButtonDown="border_MouseLeftButtonDown"></Rectangle>
       <HyperlinkButton Tag="BottomRight" x:Name="resizeButton"  Width="10" Height="10" Grid.Row="3" Grid.Column="3" ClickMode="Hover" HorizontalAlignment="Right" VerticalAlignment="Bottom" MouseLeftButtonDown="border_MouseLeftButtonDown" Cursor="SizeNWSE" IsTabStop="False" >
           <HyperlinkButton.Background>
               <ImageBrush ImageSource="/OutageNotices;component/Images/resize.png"></ImageBrush>
           </HyperlinkButton.Background>
       </HyperlinkButton>
       
       <!-- header row -->
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="1" Grid.ColumnSpan="4">
           <HyperlinkButton NavigateUri="/Core/CheckingForUpdates.xaml" FontSize="8" VerticalAlignment="Center" Margin="0,0,0,0" IsTabStop="False">CHECK FOR UPDATES</HyperlinkButton>
           
           <TextBlock Foreground="{StaticResource XeroMidOrangeBrush}">|</TextBlock>
           
           <HyperlinkButton x:Name="aboutButton" FontSize="8" VerticalAlignment="Center" Margin="0,0,30,0" IsTabStop="False" Click="aboutButton_Click" >ABOUT</HyperlinkButton>
           
           <HyperlinkButton x:Name="minimizeButton" Width="12" Margin="5,0,0,0" Click="minimizeButton_Click" IsTabStop="False" Opacity="0.5" MouseEnter="HyperLinkButton_MouseEnter" MouseLeave="HyperLinkButton_MouseLeave">
               <HyperlinkButton.Background>
                   <ImageBrush ImageSource="/OutageNotices;component/Images/minimizeButton.png" Stretch="None"/>
               </HyperlinkButton.Background>
               <ToolTipService.ToolTip>
                   <ToolTip Margin="0,30,0,0" Content="Minimize"/>
               </ToolTipService.ToolTip>
           </HyperlinkButton>

Read more: Andrew Tokeley

Posted via email from .NET Info