Styling Databound Items in WrapPanel

4 posts, 0 answers
  1. Chad
    Chad avatar
    8 posts
    Member since:
    Feb 2011

    Posted 20 Feb 2011 Link to this post

    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!

  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 23 Feb 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Chad
    Chad avatar
    8 posts
    Member since:
    Feb 2011

    Posted 26 Feb 2011 Link to this post

    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.
  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 01 Mar 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Back to Top