Click here to Skip to main content
13,513,296 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked
Posted 23 Oct 2012

CharmFrame – The Design

, 23 Oct 2012
Rate this:
Please Sign up or sign in to vote.
CharmFrame - the Design

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 =
            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) } };


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 --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180417.1 | Last Updated 23 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid