Styling Databound Items in WrapPanel

[Chad]

Hello,

I would like to display the elements in a WrapPanel using particular styles.  I am using an ObservableCollection<string> and binding to an ItemsControl via the ItemsSource attribute.  

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
    <ItemsControl Height="Auto" Width="Auto" Name="itemsControl1" ItemsSource="{Binding}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <telerikPrimitives:RadWrapPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>

The columns in the WrapPanel come out touching each other.  I would like to have a margin around each item (string) in the WrapPanel.  I would also like to know whether it's possible to have some of the strings colored differently than others based on an attribute of the string, e.g. if it starts with A.

Thanks in advance!

[Victor]

Hi Chad,

 Thank you for writing.

 ItemsControl has a property named ItemTemplate and if set to a DataTemplate object will be used to define the look of each item. A style depending on the strings can be achieved with a simple value converter and bindings. Please have a look at the code snippets below, they demonstrate the above explanation.

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.Resources>
        <local:ValueToBrushConverter x:Key="valueToBrushConverter"/>
    </Grid.Resources>

    <ItemsControl x:Name="itemsControl">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <t:RadWrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1"
                        BorderBrush="Gray"
                        Margin="4">
                    <TextBlock Text="{Binding}"
                                Foreground="{Binding Converter={StaticResource valueToBrushConverter}}"/>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

public class ValueToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string str = (string)value;
        if (str.StartsWith("A"))
        {
            return new SolidColorBrush(Colors.Red);
        }

        return new SolidColorBrush(Colors.White);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
}

I hope this is useful, please write again if you need further assistance.

Kind regards,
Victor
the Telerik team

[Chad]

Thanks! I realize the question ended up being more about WPF in general than the RadWrapPanel... but this gave me what I needed to move forward.

For anyone else reading, I had to add xmlns:local="clr-namespace:MyNameSpace" which wasn't clear to me at first.

[Victor]

Hello Chad,

 It is great that you found the explanation useful. Please do not hesitate to write again if you have other questions.

Greetings,
Victor
the Telerik team