Intersoft ClientUI Documentation
StackMode Property (UXStackButton)



Intersoft.Client.UI.Aqua.UXStackMenu Namespace > UXStackButton Class : StackMode Property
Gets or sets the stack mode.
Syntax
<CategoryAttribute("Stack")>
Public Property StackMode As StackMode
Dim instance As UXStackButton
Dim value As StackMode
 
instance.StackMode = value
 
value = instance.StackMode
[CategoryAttribute("Stack")]
public StackMode StackMode {get; set;}
[CategoryAttribute("Stack")]
public:
property StackMode StackMode {
   StackMode get();
   void set (    StackMode value);
}
Remarks

You can change the stack mode of a UXStackButton using StackMode property. There are three different stack modes they are ArcStyle, GridStyle and MenuStyle. Each of the mode has different kind of settings that specific for each visual effects.

Arc Style

ArcStyle shows the items of UXStackButton in arc representation.

XAML
Copy Code 
<Intersoft:UXStackButton Content="Button" HorizontalAlignment="Center" Height="64" VerticalAlignment="Bottom" Width="64" Icon="ShareLarge.png">
        <Intersoft:UXStackItem Icon="twitter.png" Text="Twitter"/>
        <Intersoft:UXStackItem Icon="facebook.png" Text="Facebook"/>
        <Intersoft:UXStackItem Icon="digg.png" Text="Digg"/>
        <Intersoft:UXStackItem Icon="delicious.png" Text="Delicious"/>
        <Intersoft:UXStackItem Icon="flickr.png" Text="Flickr"/>
        <Intersoft:UXStackItem Icon="linkedin.png" Text="Linked In"/>
</Intersoft:UXStackButton>

The following are list of properties you can customize when using ArcStyle mode.

Grid Style

GridStyle shows the items of UXStackButton within a grid panel that hosted inside a CallOut.

XAML
Copy Code 
<Intersoft:UXStackButton Content="Button" HorizontalAlignment="Center" Height="64" VerticalAlignment="Bottom" Width="64" Icon="ShareLarge.png" StackMode="GridStyle" StackGridMode="DynamicGrid">
        <Intersoft:UXStackItem Icon="twitter.png" Text="Twitter"/>
        <Intersoft:UXStackItem Icon="facebook.png" Text="Facebook"/>
        <Intersoft:UXStackItem Icon="digg.png" Text="Digg"/>
        <Intersoft:UXStackItem Icon="delicious.png" Text="Delicious"/>
        <Intersoft:UXStackItem Icon="flickr.png" Text="Flickr"/>
        <Intersoft:UXStackItem Icon="linkedin.png" Text="Linked In"/>
</Intersoft:UXStackButton>

The following are list of properties you can customize when using GridStyle mode.

Understanding Grid Layout

The grid layout is driven from StackGridMode property along with StackGridColumn and StackGridRow. There are six types of grid layout that you can choose from, they are.

  • AutoColumn
    The items are arranged in a single row with infinite columns. StackGridColumn and StackGridRow is ignored in this mode.
  • AutoRow
    The items are arranged in a single column with infinite rows. StackGridColumn and StackGridRow is ignored in this mode.
  • MaxColumn
    The items are arranged in a row until it reach the number of maximum column defined in StackGridColumn. When it happens it will create new rows until all items is arranged.
  • MaxRow
    The items are arranged in a column until it reach the number of maximum row defined in StackGridRow . When it happens it will create new columns until all items is arranged.
  • DynamicGrid
    The items are arranged in a layout determined by StackGridColumn and StackGridRow . If the total number of item is less than the available space, it will shrink the empty spaces. On contrary if the total number of item is larger than the available space the layout will not grow like in MaxColumn or MaxRow modes, instead it will provide scroll bar to scroll the items.
  • Grid
    The items are arranged in a fix layout determined by StackGridColumn and StackGridRow. Unlike in DynamicGrid, if the total number of item is less than the available space, the layout will not shrink.

Using StackGridTemplate

The content of UXStackButton is not necessary 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 use custom content for UXStackButton using StackGridTemplate.

XAML
Copy Code 
<Intersoft:UXStackButton Icon="Mail.png" Text="SendMail" Height="64" Width="64" StackMode="GridStyle">
    <Intersoft:UXStackButton.StackGridTemplate>
        <DataTemplate>
            <StackPanel Width="250">
                <Intersoft:FieldLabel HeaderForeground="White" Header="To :" Margin="4" HorizontalContentAlignment="Stretch">
                    <Intersoft:UXTextBox></Intersoft:UXTextBox>
                </Intersoft:FieldLabel>
                <RichTextBox Height="125" Margin="4"/>                            
                <Intersoft:GlassButton Content="Send" Margin="4"/>
            </StackPanel>
        </DataTemplate>
    </Intersoft:UXStackButton.StackGridTemplate>
</Intersoft:UXStackButton>

Menu Style

MenuStyle shows the items of UXStackButton within a menu panel that hosted inside a CallOut. 

XAML
Copy Code 
<Intersoft:UXStackButton Content="Button" HorizontalAlignment="Center" Height="64" VerticalAlignment="Bottom" Width="64" Icon="ShareLarge.png" StackMode="MenuStyle">
        <Intersoft:UXStackItem Icon="twitter.png" Text="Twitter"/>
        <Intersoft:UXStackItem Icon="facebook.png" Text="Facebook"/>
        <Intersoft:UXStackItem Icon="digg.png" Text="Digg"/>
        <Intersoft:UXStackItem Icon="delicious.png" Text="Delicious"/>
        <Intersoft:UXStackItem Icon="flickr.png" Text="Flickr"/>
        <Intersoft:UXStackItem Icon="linkedin.png" Text="Linked In"/>
</Intersoft:UXStackButton>

Requirements

Target Platforms: Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

See Also

Reference

UXStackButton Class
UXStackButton Members

Concepts

UXStackButton

Send Feedback