Intersoft ClientUI Documentation
How-to: Apply Styling to Items in Items Control
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Fundamentals > Items Control Overview > Items Control How-to Topics > How-to: Apply Styling to Items in Items Control

Glossary Item Box

This example shows how to apply style to UXListBox items using ItemContainerStyle property.

Example

Description

Styling using ItemContainerStyle property is the basic way to style the items of ItemsControl. As discussed above each ItemsControl has an item container type, so basically you just need to provide the style of the item container type and assign it to ItemContainerStyle property.

The following example shows how to style the item of UXListBox using ItemContainerStyle property.

Code

XAML Copy Code 
<UserControl.Resources>
        <Style x:Key="UXListBoxItemStyle1" TargetType="Intersoft:UXListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="CornerRadius" Value="0"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Intersoft:UXListBoxItem">
                        <Grid x:Name="RootElement" Background="LightBlue">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FillColor"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentPresenter"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FillColor2"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="FillColor" Background="Magenta" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
                            <Border x:Name="FillColor2" Background="Magenta" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
                            <Intersoft:StylishLabel x:Name="ContentPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" ContentType="{TemplateBinding ContentType}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentEffect="{x:Null}" CornerRadius="{TemplateBinding CornerRadius}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="Stretch" IsTabStop="False" ImageMargin="{TemplateBinding ImageMargin}" ImageWidth="{TemplateBinding ImageWidth}" ImageStretch="{TemplateBinding ImageStretch}" ImageSource="{TemplateBinding Icon}" ImageHeight="{TemplateBinding ImageHeight}" Padding="{TemplateBinding Padding}" TextImageRelation="{TemplateBinding TextImageRelation}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="Stretch"/>
                            <Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="1" CornerRadius="1" Visibility="Collapsed"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Intersoft:UXListBox x:Name="ListBox1" HorizontalAlignment="Center" VerticalAlignment="Center" ItemContainerStyle="{StaticResource UXListBoxItemStyle1}">
            <Intersoft:UXListBoxItem Content="Item #1"/>
            <Intersoft:UXListBoxItem Content="Item #2"/>
            <Intersoft:UXListBoxItem Content="Item #3"/>
            <Intersoft:UXListBoxItem Content="Item #4"/>
        </Intersoft:UXListBox>
    </Grid>

See Also

©2012. All Rights Reserved.