Flyout control for Win8 Metro App

A flyout control is a popup control appear on an event.

The code to create flyout pop-up from Settings Page



args.Request.ApplicationCommands.Add(
new SettingsCommand("settings", "Application Settings",
    a =>
    {
     int width = 500;
     _settingsPopup = new Popup();
     _settingsPopup.Closed += OnPopupClosed;
     Window.Current.Activated += OnWindowActivated;
     _settingsPopup.IsLightDismissEnabled = true;
     _settingsPopup.Width = width;
     _settingsPopup.Height = Window.Current.Bounds.Height;
     AppSettingsFlyoutPopup mypane = new AppSettingsFlyoutPopup();
     mypane.Width = width;
     mypane.Height = Window.Current.Bounds.Height;
     _settingsPopup.Child = mypane;
     _settingsPopup.SetValue(Canvas.LeftProperty, Window.Current.Bounds.Width - mypane.Width);
     _settingsPopup.SetValue(Canvas.TopProperty, 0);
     _settingsPopup.IsOpen = true;
     this.layout.Opacity = .3;
     _settingsPopup.Closed += (e, s) => this.layout.Opacity = 1;
    }));
  

Feature Stapling in SharePoint 2010

Feature stapling helps us to enable the feature at following scope
1. Web
2. Site
3. Web application
4. Farm

Stapling required atleast two features
1. Feature that needs to be stapled
2. Feature to staple at different scope.
Obviously the stapler scope should be above the feature being stapled.

To activate the feature for type of sites in web application, we need to associate stapling a feature to global site definition(TemplateName=" GLOBAL") and blank site (TemplateName=" STS#1").

Elements file of Stapler feature will look like

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<FeatureSiteTemplateAssociation   Id="c4386b61-3aa0-4017-98c4-0feb17a97cb5" TemplateName=" GLOBAL" />
<FeatureSiteTemplateAssociation   Id="c4386b61-3aa0-4017-98c4-0feb17a97cb5" TemplateName=" STS#1" />
</Elements>

Solution example

Dialog box Styling in SharePoint 2010

SharePoint 2010 has two important classes to control the dialog display
.s4-notdlg
.ms-dialog


s4-notdlg
Apply the class to any div which is not required to disply

ms-dialog
This class is added to the tag of dialog, so we can modify the css of any class in the dialog.
e.g.
.ms-dialog .ms-cui-topBar2
{
   height:0px;
}