Intersoft ClientUI Documentation
How-to: Customize Stack Grid Template
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Dock Controls Overview > UXDock > How-to: Customize Stack Grid Template

This example shows how to customize StackGridTemplate.

Example

Description

UXDockButton is inherited from UXStackButton, it has all the characteristics of a stack button and adjusted to follow the user experiences of UXDock. UXStackButton content is not necessary a collection of UXStackItem. Using GridStyle as StackMode of UXStackButton, you can use StackGridTemplate instead specifying items for its stack content.

The following example shows how to customize StackGridTemplate.

Code

XAML
Copy Code 
<Intersoft:UXPage.Resources>
    <DataTemplate x:Key="GridTemplate">
        <Intersoft:DockPanel FillChildMode="Custom">
            <Intersoft:GlassLabel Content="Contact Details" Intersoft:DockPanel.Dock="Top" FontSize="13.333" CornerRadius="7,7,0,0" BorderBrush="Black"/>
            <StackPanel Orientation="Horizontal" Intersoft:DockPanel.IsFillElement="True" Height="175" Background="White">
                <Intersoft:ContentReflector VerticalAlignment="Center" HorizontalAlignment="Center" Margin="30,0,0,0">
                    <Image Source="/Intersoft.ClientUI.Samples.UXDock;component/Assets/Images/Icons/Contact.png" VerticalAlignment="Center"/>
                </Intersoft:ContentReflector>
                <Intersoft:UXItemsControl VerticalAlignment="Center" Margin="0,0,20,0">
                    <Intersoft:FieldLabel Header="Nick name:" HeaderWidth="100" HorizontalHeaderAlignment="Right">
                        <Intersoft:UXTextBox Width="150"/>
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="Full name:" HeaderWidth="100" HorizontalHeaderAlignment="Right">
                        <Intersoft:UXTextBox Width="150"/>
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="Address:" HeaderWidth="100" HorizontalHeaderAlignment="Right">
                        <Intersoft:UXTextBox Width="150"/>
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="Birth Date:" HeaderWidth="100" HorizontalHeaderAlignment="Right">
                        <Intersoft:UXTextBox Width="150"/>
                    </Intersoft:FieldLabel>
                </Intersoft:UXItemsControl>
            </StackPanel>
            <Grid x:Name="CommandGrid" Intersoft:DockPanel.Dock="Bottom">
                <Intersoft:UXCommandBar CornerRadius="0,0,8,8" Padding="5,10,8,10">
                    <Intersoft:UXButton Click="UXButton1_Click" Icon="/Intersoft.ClientUI.Samples.Assets;component/Images/Commands/Check.png" Content="Save" Margin="0" Width="90" IsDefault="True" />
                    <Intersoft:UXButton Click="UXButton2_Click" Icon="/Intersoft.ClientUI.Samples.Assets;component/Images/Commands/Cancel.png" Content="Discard" Margin="8,0,0,0" Width="90" IsCancel="True" />
                </Intersoft:UXCommandBar>
                <TextBlock Name="StatusLabel" VerticalAlignment="Center" Margin="12" Foreground="#FF0B468D" IsHitTestVisible="False"/>
            </Grid>
        </Intersoft:DockPanel>
    </DataTemplate>
</Intersoft:UXPage.Resources>

<Intersoft:UXDock x:Name="SampleControl1">
    <Intersoft:UXDockButton x:Name="NewContact" Icon="/Intersoft.ClientUI.Samples.UXDock;component/Assets/Images/Icons/AddContact.png" Text="Add New Contact" 
                               StackMode="GridStyle" StackGridTemplate="{StaticResource GridTemplate}"/>
</Intersoft:UXDock>
See Also
UXDock Class
UXStackButton Class

Concepts

UXDock

Other Resources

Locating the Samples in Local Installation
Walkthroughs and How-to Topics