Lester's XAML Blog https://docs.microsoft.com/archive/blogs/llobo/feed.xml Simple, easy & beautiful Wed, 29 Jul 2015 23:04:50 GMT en-US hourly 1 Visual Studio 2010 SP1 now available https://docs.microsoft.com/archive/blogs/llobo/visual-studio-2010-sp1-now-available Wed, 09 Mar 2011 08:10:00 GMT https://blogs.msdn.microsoft.com/llobo/2011/03/09/visual-studio-2010-sp1-now-available/ The final version of VS2010 sp1 is now available for download

The description\features in the SP1  can be found at this LINK

Share this post

 

]]> Silverlight 5 FireStarter https://docs.microsoft.com/archive/blogs/llobo/silverlight-5-firestarter Thu, 02 Dec 2010 19:06:00 GMT https://blogs.msdn.microsoft.com/llobo/2010/12/02/silverlight-5-firestarter/ Today we announced the plans for the next version of Silverlight along with a bunch a demos at the FireStarter event. If you missed it, you can take a look at the recordings

 

The feature list for SL5 includes

  • Media improvements
  • Graphics Improvements
  • Databinding updates
  • Performance improvements
  • Fluid UI capabilities
  • Text improvements
  • .... and much more 
Share this post

 

]]> WPF Ribbon (October Update Available) https://docs.microsoft.com/archive/blogs/llobo/wpf-ribbon-october-update-available Fri, 22 Oct 2010 13:27:00 GMT https://blogs.msdn.microsoft.com/llobo/2010/10/22/wpf-ribbon-october-update-available/ October 2010 update of WPF Ribbon (on codeplex) is now available for download.

The updates include:

·         Ribbon Targets .NET  4.0 as well

·         Ribbon targeting 4.0 takes advantage of the ClearType in WPF

·         Ribbon now works in VS2010 Express editions

·         Stylistic fixes

·         Rendering fixes

·         …

  

Share this post

 

]]> Xaml Art Assets https://docs.microsoft.com/archive/blogs/llobo/xaml-art-assets Mon, 27 Sep 2010 22:20:00 GMT https://blogs.msdn.microsoft.com/llobo/2010/09/27/xaml-art-assets/ One more interesting site: www.xamalot.com  ... Was looking around for some interesting xaml artifacts for a sample project and this site had plenty of it.

The clipart is pretty nice (as shown below)... Have fun..

\

Share this post

 

]]> Porting WPF apps to Silverlight https://docs.microsoft.com/archive/blogs/llobo/porting-wpf-apps-to-silverlight Sun, 26 Sep 2010 21:42:00 GMT https://blogs.msdn.microsoft.com/llobo/2010/09/26/porting-wpf-apps-to-silverlight/ The other day when browsing through the blogosphere I came across Arik's posts describing the workarounds\tips that he used for porting his 3.5 WPF application to Silverlight. It was a good read since all these tips from different bloggers have been consolidated in 2 posts

Share this post

 

]]> Using RibbonGallery Control https://docs.microsoft.com/archive/blogs/llobo/using-ribbongallery-control Wed, 18 Aug 2010 23:34:00 GMT https://blogs.msdn.microsoft.com/llobo/2010/08/18/using-ribbongallery-control/ The Ribbon Control is a pretty big control owing to the complexity of the Ribbon design guidelines. You can give it a try by downloading from LINK

While there are several things to blog about, this post will focus on RibbonGallery. The download provides a sample that covers all features by implementing the Office Ribbon. This post will trim the sample to focus specifically on the RibbonGallery usage

To whet our appetite, the dropdown of both the controls are RibbonGallery controls

image

The gallery can be hosted in the following Ribbon Controls:

§  RibbonMenuButton

§  RibbonSplitButton

§  RibbonComboBox

§  RibbonMenuItem

§  RibbonSplitMenuItem

§  RibbonApplicationMenuItem

§  RibbonApplicationSplitMenuItem

So lets take the first case. The xaml looks like:

<ribbon:RibbonComboBox DataContext="{x:Static data:WordModel.FontFace}">
    <ribbon:RibbonGallery MaxColumnCount="1" >
        <ribbon:RibbonGallery.GalleryItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="{Binding}" FontFamily="{Binding}"/>
                </Grid>
            </DataTemplate>
        </ribbon:RibbonGallery.GalleryItemTemplate>
    </ribbon:RibbonGallery>
</ribbon:RibbonComboBox>

Basically, we need a gallery with just one column (the fontFamily). 
In addition, we need to bind the gallery to the itemsSource
<!-- RibbonGallery -->
<Style TargetType="{x:Type ribbon:RibbonGallery}">
    <Setter Property="ItemsSource" Value="{Binding CategoryDataCollection}" />
    <Setter Property="SelectedItem" Value="{Binding SelectedItem}" />
    <Setter Property="Command" Value="{Binding Command}" />
</Style>
 
<!-- RibbonGalleryCategory -->
<Style TargetType="{x:Type ribbon:RibbonGalleryCategory}">
    <Setter Property="Header" Value="{Binding Label}" />
    <Setter Property="ItemsSource" Value="{Binding GalleryItemDataCollection}" />
</Style>
 
 

If you look at the drop down, we have 2 categories: Recently Used Fonts and All Fonts

image


In code, this looks like 

GalleryData<FontFamily> galleryData = new GalleryData<FontFamily>();
 
GalleryCategoryData<FontFamily> recentlyUsedCategoryData = 
         new GalleryCategoryData<FontFamily>(){  Label = "Recently Used Fonts"  };
galleryData.CategoryDataCollection.Add(recentlyUsedCategoryData);
 
GalleryCategoryData<FontFamily> allFontsCategoryData =  
        new GalleryCategoryData<FontFamily>(){ Label = "All Fonts" };
foreach (FontFamily fontFamily in System.Windows.Media.Fonts.SystemFontFamilies)
{
        allFontsCategoryData.GalleryItemDataCollection.Add(fontFamily);
}
galleryData.CategoryDataCollection.Add(allFontsCategoryData);
 
galleryData.Command = new PreviewDelegateCommand<FontFamily>(ChangeFontFace, 
CanChangeFontFace, PreviewFontFace, CancelPreviewFontFace);
 

And this gives you the basic gallery control. You can modify the template of the gallery control and go as complicated as you wish.

For the second case, we could set the ItemTemplate as below using triggers to get a specific behavior for “Automatic Color”

<ribbon:RibbonGallery.GalleryItemTemplate>
    <DataTemplate>
        <Grid>
            <Rectangle x:Name="Rect" Width="16" Height="16" Fill="{Binding}" />
            <Grid x:Name="AutomaticColorPane" Width="210" Visibility="Collapsed">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Rectangle Width="16" Height="16" StrokeThickness="1" Stroke="Orange" Fill="{Binding}"/>
                <TextBlock Grid.Column="1" Text="Automatic Color" Margin="12,0,0,0" VerticalAlignment="Bottom" />
            </Grid>
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type 
              ribbon:RibbonGalleryCategory}},Path=Header}" Value="Automatic Color">
                <Setter TargetName="Rect" Property="Visibility" Value="Collapsed" />
                <Setter TargetName="AutomaticColorPane" Property="Visibility" Value="Visible" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ribbon:RibbonGallery.GalleryItemTemplate>
 
However,by itself you would end up with a control like
image
So what we need to increase the number of columns and remove the Category Header 
when the value is “Automatic Color”.
<ribbon:RibbonGallery x:Name="FontColorGallery" ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ribbon:RibbonGallery.CategoryStyle>
        <Style TargetType="{x:Type ribbon:RibbonGalleryCategory}" BasedOn="{StaticResource 
{x:Type ribbon:RibbonGalleryCategory}}">
            <Setter Property="MinColumnCount" Value="10" />
            <Setter Property="MaxColumnCount" Value="10" />
            <Style.Triggers>
                <Trigger Property="Header" Value="Automatic Color">
                    <Setter Property="HeaderVisibility" Value="Collapsed" />
                    <Setter Property="MinColumnCount" Value="1" />
                    <Setter Property="MaxColumnCount" Value="1" />
                    <Setter Property="IsSharedColumnSizeScope" Value="True" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ribbon:RibbonGallery.CategoryStyle>
 

Now you get the templated gallery as shown before.
One more thing, you could use gallery in any WPF app – not necessarily in the ribbon. 
Below, you see the RibbonGallery as part of the RichTextBox.
image


The sample app is attached.

Share this post

 

WpfRibbonApplication1.zip

]]> Zoomable Canvas Control https://docs.microsoft.com/archive/blogs/llobo/zoomable-canvas-control Thu, 12 Aug 2010 07:37:00 GMT https://blogs.msdn.microsoft.com/llobo/2010/08/12/zoomable-canvas-control/ Kael has a nice series on the Zoomable Canvas control

The usage is something like

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <ZoomableCanvas Loaded="ZoomableCanvas_Loaded"
                        RealizationLimit="1000"
                        RealizationRate="10"
                        RealizationPriority="Background"/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

(Move the Slider right to see it in action)

(this is an xbap in an iframe. Would require IE\FireFox with .NET4 on your machine)

Slide the slider right to populate the canvas. You can zoomin\out using the mouse scroll.

Share this post

 

]]> Xaml Toolkit: Manipulation of Xaml https://docs.microsoft.com/archive/blogs/llobo/xaml-toolkit-manipulation-of-xaml Tue, 10 Aug 2010 07:34:00 GMT https://blogs.msdn.microsoft.com/llobo/2010/08/10/xaml-toolkit-manipulation-of-xaml/ One of the interesting things you could easily do with the Xaml Toolkit is manipulation of Xaml. For example, in the case of XamlPadX, if we copy pasted xaml from a WPF application, it wouldnt render because of events, unknown members and so forth. We would need to extract these members in order to make the xaml render. Using the Xaml Toolkit, its pretty simple.

XamlDomObject rootObject = XamlDomServices.Load("MainWindow.xaml");

foreach (XamlDomObject objectNode in rootObject.DescendantsAndSelf())

{

    delMemberList.Clear();

    if (objectNode.Type.IsUnknown)

    {

        delDomobjList.Add(objectNode);

        continue;

    }

 

    foreach(XamlDomMember member in objectNode.MemberNodes)

        if (member.Member.IsEvent || member.Member.Name.Equals("Class") || member.Member.IsUnknown) delMemberList.Add(member);

    foreach (XamlDomMember delItem in delMemberList) objectNode.RemoveMemberNode(delItem);

}

 

foreach (XamlDomObject delItem in delDomobjList) delItem.Parent.Items.Remove(delItem);

 

XamlDomServices.Save(rootObject, "NewMainWindow.xaml");

 

You could do the above using nodestreams (Link) but for more complicated manipulations, its easier using the Dom especially given that its Linq friendly :)

The project is attached

Share this post

 

ConsoleApplication2.zip

]]> WPF Ribbon Basics https://docs.microsoft.com/archive/blogs/llobo/wpf-ribbon-basics Fri, 06 Aug 2010 05:38:00 GMT https://blogs.msdn.microsoft.com/llobo/2010/08/06/wpf-ribbon-basics/  

The WPF Ribbon control is easy to use once you get the basics of it.

The structure is simple

<ribbon:Ribbon x:Name="Ribbon" >

    <ribbon:Ribbon.ApplicationMenu>

        <ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png" >

            <ribbon:RibbonApplicationMenuItem Header="Open _File" ImageSource="Images\LargeIcon.png"/>

        </ribbon:RibbonApplicationMenu>

    </ribbon:Ribbon.ApplicationMenu>

    <ribbon:RibbonTab Header="Home">

        <ribbon:RibbonGroup Header="Group1">

 

So you have Ribbon, Menu, RibbonTab, and then the Ribbon Group. When you create a new Ribbon application, you get this wireframe ready – so its easy to start.

You got the group – lets populate it. If you look at the Xaml, the Ribbon controls have a SmallImageResource and a LargeImageResource property. This enables the ribbon to use the appropriate image when resizing. Each control can also have rich tooltips by setting the following properties.

   ToolTipDescription="SplitButton having all Tooltip properties Set. Ribbon is awesome!!!"
   ToolTipImageSource="Images\Symantec.ico"
   ToolTipFooterTitle="More Details"
                       
   ToolTipFooterDescription="Press F1 for No Help."
   ToolTipFooterImageSource="Images\Alert 04.ico"
 

Using the above for the SplitButton, we get the following

image

As mentioned earlier, the ribbon picks up the appropriate image sources when resizing. Take a look at the below image and notice how the controls and their associated images shrink when the window is resized. Pretty cool !!

image

You also have the MinimizeRibbon context menu. This is baked in.

image


Next in line is the QuickAccess Toolbar. This is the toolbar that appears in the Window Title bar right at the top. The context menu for the controls shows the option “Add to Quick Access Toolbar”. To have this enabled you need to have a command enabled on the control.

<ribbon:RibbonSplitButton 
        SmallImageSource="Images\SmallIcon.png"
        Command="FirstPage"
        Label="Page Home" >
    <ribbon:RibbonMenuItem Header="Next Page" 
            ImageSource="{x:Null}"
            QuickAccessToolBarImageSource="Images\Plus.ico"
            Command="NextPage"/>
 

Things to note is the enabled commands. Also, we have a QuickAccessToolBarImageSource on the menuItem. As the name suggests, you could set an additional image for the Quick Access Toolbar. In the image below the image in the Menu for PreviousPage is Green but its Red in the toolbar.

image

You could also move the Toolbar to be below the Ribbon as shown below

image

And then you have the removal options too

image

Finally, you could tweak the ribbon colors

 
<ribbon:Ribbon x:Name="Ribbon"  Background="BlanchedAlmond"  >
    <ribbon:Ribbon.ApplicationMenu>
        <ribbon:RibbonApplicationMenu SmallImageSource="Images\Open.png" Background="Maroon" >
 

image

 

That’s it for now. So lets see some Ribbon apps.

Sample code is attached

Leave a comment about your thoughts\feedback. Also, would love to see any apps that you create using the Ribbon Control.

 

Share this post

 

WpfRibbonApplication2.zip

]]> Ribbon Control Design Time Experience https://docs.microsoft.com/archive/blogs/llobo/ribbon-control-design-time-experience Mon, 02 Aug 2010 18:19:00 GMT https://blogs.msdn.microsoft.com/llobo/2010/08/02/ribbon-control-design-time-experience/ The Ribbon Control is now available to the public for download. If you havent taken a look yet, would definitely recommend it.

A neat thing about this release is that it includes a design time plugin to VS. So out of the box you have a template in VS, when creating a new project

The design window looks like

 To make the experience better, the toolbox has the ribbon controls in its own expander

Drag drop and you have a Ribbon app on your hands :)

 

Share this post

 

]]>