Click here to Skip to main content
11,718,016 members (83,435 online)
Click here to Skip to main content

Tagged as

CharmFrame – The Design

, 23 Oct 2012 CPOL 2K 1
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.

CharmFrame.cs

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

Generic.xaml

<Style
   TargetType="local:CharmFrame">
    <Setter
       Property="HorizontalContentAlignment"
       Value="Stretch" />
    <Setter
       Property="IsTabStop"
       Value="False" />
    <Setter
       Property="VerticalContentAlignment"
       Value="Stretch" />
    <Setter
       Property="Template">
        <Setter.Value>
            <ControlTemplate
               TargetType="local:CharmFrame">
                <Grid>
                    <Border
                       BorderBrush="{TemplateBinding BorderBrush}"
                       BorderThickness="{TemplateBinding BorderThickness}"
                       Background="{TemplateBinding Background}">
                        <ContentPresenter
                           ContentTemplate="{TemplateBinding ContentTemplate}"
                           ContentTransitions="{TemplateBinding ContentTransitions}"
                           Content="{TemplateBinding Content}"
                           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                           Margin="{TemplateBinding Padding}"
                           VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                    <ContentPresenter
                       Content="{TemplateBinding CharmContent}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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.

App.xaml.cs

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

CharmFrame

CharmFlyout binaries reside here: http://nuget.org/packages/charmflyout/

CharmFlyout source resides here: http://charmflyout.codeplex.com/

Further Reading

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

License

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

Share

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
Web03 | 2.8.150901.1 | Last Updated 23 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid