Intersoft ClientUI Documentation
How-to: Configure UXListBoxItem ImageContent Properties From UXListBox
Intersoft ClientUI 8 > ClientUI Fundamentals > Content Model Overview > How-to: Configure UXListBoxItem ImageContent Properties From UXListBox

The following examples show how to configure UXListBoxItem ImageContent properties such as TextImageRelation, ContentType, and related properties from UXListBox.

Example

Description

UXListBoxItem uses ImageContent presentation model. To learn more about this model, see Content Model Overviews.

You can assign UXListBoxItem ImageContent properties such as TextImageRelation, ContentType at UXListBoxItem directly. However, in certain cases where you have many items in the list box, assigning the properties one by one might not be ideal.

Fortunately there are several ways to simplify this. The following code shows how to assign the ContentType and TextImageRelation properties for UXListBoxItem from UXListBox control.

Code

XAML
Copy Code 
<Intersoft:UXListBox HorizontalAlignment="Left" Height="200" VerticalAlignment="Top" Width="150" ItemContentType="ContentAndImage" TextImageRelation="TextBeforeImage">
    <Intersoft:UXListBoxItem Content="Item #1" Icon="Item1.jpg"/>
    <Intersoft:UXListBoxItem Content="Item #2" Icon="Item2.jpg"/>
    <Intersoft:UXListBoxItem Content="Item #3" Icon="Item3.jpg"/>
    <Intersoft:UXListBoxItem Content="Item #4" Icon="Item4.jpg"/>
</Intersoft:UXListBox>

Example

Description

Properties at item level has higher precedence than properties at parent level. This allows you to make an exception for certain item that do not want to follow the configuration defined by their parent.

The following sample code shows you how to override some behaviors that defined by UXListBox at UXListBoxItem.

Code

XAML
Copy Code 
<Intersoft:UXListBox HorizontalAlignment="Left" Height="200" VerticalAlignment="Top" Width="150" ItemContentType="ContentAndImage" TextImageRelation="TextBeforeImage">
    <Intersoft:UXListBoxItem Content="Item #1" Icon="Item1.jpg"/>
    <Intersoft:UXListBoxItem Content="Item #2" Icon="Item2.jpg" ContentType="Image"/>
        <Intersoft:UXListBoxItem Content="Item #3" Icon="Item3.jpg" TextImageRelation="ImageAboveText"/>
        <Intersoft:UXListBoxItem Content="Item #4" Icon="Item4.jpg"/>
</Intersoft:UXListBox>

Example

Description

Assigning properties from parent level has some limitation. If the item has Style properties assigned, it will ignore any parent configuration even though the style does not define that particular settings.

So if you need to assign style to the UXListBoxItem, make sure you set the ImageContent properties in that style as well.

The following example code shows how to assign the ContentType and TextImageRelation properties for UXListBoxItem from the UXListBox control via ItemContainerStyle.

Code

XAML
Copy Code 
<UserControl.Resources>
    <Style x:Key="UXListBoxItemStyle1" TargetType="Intersoft:UXListBoxItem">
        <Setter Property="ContentType" Value="ContentAndImage"/>                
        <Setter Property="TextImageRelation" Value="ImageBeforeText"/>                
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot">
    <Intersoft:UXListBox HorizontalAlignment="Left" Height="200" VerticalAlignment="Top" Width="150" ItemContainerStyle="{StaticResource UXListBoxItemStyle1}">
        <Intersoft:UXListBoxItem Content="Item #1" Icon="Item1.jpg"/>
        <Intersoft:UXListBoxItem Content="Item #2" Icon="Item2.jpg"/>
        <Intersoft:UXListBoxItem Content="Item #3" Icon="Item3.jpg"/>
        <Intersoft:UXListBoxItem Content="Item #4" Icon="Item4.jpg"/>
    </Intersoft:UXListBox>
</Grid>
See Also
UXListBox Class
UXListBoxItem Class

Concepts

Content Model Overview
Items Control Overview