Basic Library for WPF and Silverlight | ComponentOne
WPF and Silverlight Edition Basic Library / HyperPanel / HyperPanel Quick Start / Step 3 of 3: Customizing the Application
In This Topic
    Step 3 of 3: Customizing the Application
    In This Topic

    In the previous steps you created a new WPF or Silverlight project and added a C1HyperPanel panel and several ContentControls to the application. In this step you'll continue by setting properties to customize those controls.

    Complete the following steps:

    1. In XAML view, set the C1HyperPanel control's orientation by adding Orientation="Horizontal" to the <c1:C1HyperPanel> tag so that it appears similar to the following:
    XAML
    Copy Code 
    <c1:C1HyperPanel x:Name="c1hp1" Height="Auto" Width="Auto" Orientation="Horizontal">
    The Orientation property determines if items in the panel are displayed horizontally or vertically. By default Orientation is set to Vertical and the panel displays content vertically; setting Orientation property to Horizontal will display content horizontally.
    1. Set the C1HyperPanel control's distribution by adding Distribution="0.2" to the <c1:C1HyperPanel> tag so that it appears similar to the following:
    XAML
    Copy Code 
    <c1:C1HyperPanel x:Name="c1hp1" Height="Auto" Width="Auto" Orientation="Horizontal" Distribution="0.2">

    The Distribution property consists of a number between .1 and 1.0 and controls how elements are zoomed near the center of the panel. The smaller the value, the more visible the zoom effect. By default, the property is set to "0.5". Setting Distribution to ".02" will cause elements in the center to appear even more zoomed in then elements at the edge of the panel.

    1. Set the C1HyperPanel control's scale by adding MinElementScale="0.5" to the <c1:C1HyperPanel> tag so that it appears similar to the following:
    XAML
    Copy Code 
    <c1:C1HyperPanel x:Name="c1hp1" Height="Auto" Width="Auto" Orientation="Horizontal" Distribution="0.2" MinElementScale="0.5">

    The MinElementScale property consists of a number between 0 and 1.0 and determines how small elements near the edge of the panel will appear when compared to elements near the center. By default, the property is set to "0". Setting MinElementScale will ensure that elements near the edge of the panel will appear half their original size at the smallest.

    1. Set the C1HyperPanel control's center by adding Center="0.1" to the <c1:C1HyperPanel> tag so that it appears similar to the following:
    XAML
    Copy Code 
    <c1:C1HyperPanel x:Name="c1hp1" Height="Auto" Width="Auto" Orientation="Horizontal" Distribution="0.2" MinElementScale="0.5" Center="0.1">

    The Center property consists of a number between 0 and 1.0 and sets where the center, or the most zoomed in element, of the panel is when the application is initially run. By default, the property is set to "0.5" and the center is in the middle. Setting Center will move the initially zoomed element to the left side of the control. This value is updated automatically as the mouse moves over the panel at run time.

    1. Add the following markup just after the <C1HyperPanel> tag and before the content elements:
    XAML
    Copy Code 
    <c1:C1HyperPanel.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000" Offset="0"/>
        <GradientStop Color="#FFFF00DF" Offset="1"/>
    </LinearGradientBrush>
</c1:C1HyperPanel.Background>

    This markup will add a gradient background to the C1HyperPanel.

    1. From the Debug menu, select Start Debugging to view how your application will appear at run time.

    The application will initially appear similar to the following:

    1. Move your mouse in the panel and notice that the Center of the content changes: