Click here to Skip to main content
11,931,584 members (66,257 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked

CharmFrame – The Design

, 23 Oct 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
The whole point of CharmFrame is to allow the developer to add another user interface element (like a UserControl) that overlays the content in the application’s main Frame.  To do this, I created a Frame-derived class called CharmFrame.  It provides one additional property called CharmContent.  Wha

The whole point of CharmFrame is to allow the developer to add another user interface element (like a UserControl) that overlays the content in the application’s main Frame. To do this, I created a Frame-derived class called CharmFrame. It provides one additional property called CharmContent. Whatever is placed in CharmContent is overlayed with the frame’s normal content.

Posts in this series:

Below is the full source to CharmFrame and the associated style. It is self-explanatory.


using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace CharmFlyoutLibrary
    public sealed class CharmFrame : Frame
        public CharmFrame()
            this.DefaultStyleKey = typeof(CharmFrame);

        public object CharmContent
            get { return (object)GetValue(CharmContentProperty); }
            set { SetValue(CharmContentProperty, value); }

        public static readonly DependencyProperty CharmContentProperty =
            DependencyProperty.Register("CharmContent", typeof(object), typeof(CharmFrame), new PropertyMetadata(null));


       Value="Stretch" />
       Value="False" />
       Value="Stretch" />
                       BorderBrush="{TemplateBinding BorderBrush}"
                       BorderThickness="{TemplateBinding BorderThickness}"
                       Background="{TemplateBinding Background}">
                           ContentTemplate="{TemplateBinding ContentTemplate}"
                           ContentTransitions="{TemplateBinding ContentTransitions}"
                           Content="{TemplateBinding Content}"
                           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                           Margin="{TemplateBinding Padding}"
                           VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                       Content="{TemplateBinding CharmContent}" />

To use CharmFrame, modify the code in App.xaml.cs to construct a CharmFrame instead of a Frame. Here the CharmContent is a green rectangle that remains in the center of the display as the main content scrolls left/right.


var rootFrame = new CharmFrame { CharmContent = new Rectangle { Width = 300, Height = 200, Fill = new SolidColorBrush(Windows.UI.Colors.Green) } };


CharmFlyout binaries reside here:

CharmFlyout source resides here:

Further Reading

This post explains how to use CharmFrame to host CharmFlyouts:CharmFrame – Adding CharmFlyout to Grid Apps.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

John Michael Hauck
Software Developer (Senior) LECO Corporation
United States United States
John Hauck has been developing software professionally since 1981, and focused on Windows-based development since 1988. For the past 17 years John has been working at LECO, a scientific laboratory instrument company, where he manages software development. John also served as the manager of software development at Zenith Data Systems, as the Vice President of software development at TechSmith, as the lead medical records developer at Instrument Makar, as the MSU student who developed the time and attendance system for Dart container, and as the high school kid who wrote the manufacturing control system at Wohlert. John loves the Lord, his wife, their three kids, and sailing on Lake Michigan.

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151126.1 | Last Updated 23 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid