Possible to change background on individual items?

[Big G]

I have the following class

public SomeClass
{
    public string Property1 {get;set;}
    public SolidColorBrush Property2 {get;set;}
}

// Array to hold SomeClass

public List<SomeClass> SomeClassList;

The list and class get populated with info (you get the idea).
Now I know I can get Property1 to be used by the LoopingList by doing something like this

LoopingListDataSource ADataSource = new LoopingListDataSource(5);

ADataSource .ItemNeeded += (sender, args) =>
{
LoopingListDataItem dataItem = new LoopingListDataItem();
dataItem.Text = SomeClassList[args.Item.Index].Property1;
args.Item = dataItem;
};

but is there anyway to change other aspects such as change the background of the LoopingListDataItem to use SomeClass.Property2? which could mean that if I had 5 items in the LoopingListDataSource they could all be different colours.

Hope that makes since :-)

[Deyan]

Hello Gareth,

Of course you can. The RadLoopingList control exposes the ItemStyle property which allows you to modify the appearance of the looping list items. Additionally, the ItemTemplate property allows you to define templates which contain multiple visual elements which properties you can bind to any properties on your business object from the source.

Regards,
Deyan
Telerik

[Big G]

Thanks for the quick reply.

Sorry if this sounds dumb but this is how I understand it. From the help documentation it says "RadLoopingList accepts a LoopingListDataSource as its data source."

So I am assuming you can't set anything else as a datasource? not like a listbox where you can bind say a List<string> as the ItemSource?

If this is the case then how can achieve what I want as I cannot bind to the properties of my business object as I cannot set my business object as the source for the LoopingList.

Again, my apologies if I have misunderstood how the LoopingList works.

[Big G]

I think I may see how its done. Just had a look at your examples app for windows phone and the code behind it.

It looks like I have to create a class which derives from a LoopingListDataItem. 

So using the code I started with as an example I would have to do this.

public SomeClass : LoopingListDataItem
{
    public string Property1 {get;set;}
    public SolidColorBrush Property2 {get;set;}
}

// Array to hold SomeClass

public List<SomeClass> SomeClassList;

I know I obviously need property notification in the above but you get the point.
Then modify the following like so.

LoopingListDataSource ADataSource = new LoopingListDataSource(5);

ADataSource .ItemNeeded += (sender, args) =>
{
args.Item = new SomeClass() {Property1 = "Test", Property2 = new SolidColorBrush(Colors.Blue);
};

Then in the style I can now bind to Properyt1 and Property2.

If this is the correct way of doing things then maybe an example should be put in the documentation to help explain how you can use your own objects.

[Deyan]

Hello Gareth,

Yes, that's the correct way. The LoopingListDataSource is just the needed infrastructure for the LoopingList to function. It does not limit you in terms of what objects you can use. You can actually use it as any other List control, define templates and bind properties.

We will update our online help in this regard.

Thanks!

Regards,
Deyan
Telerik

[Big G]

The LoopingList Control is not displaying my items correctly. Here is the c# code

LoopingListDataSource src = new LoopingListDataSource(9);

public LoopingListDataSource Source
{
     get { return src; }
      set { src = value;
             RaisePropertyChanged("Source");
            }
}

Weeks = new ObservableCollection<WeekDays>();

for (int i = 0; i < 9; i++)
{
       Weeks.Add(new WeekDays()
       {
               week = (i + 1).ToString(),
                        Completed = true,
                        FillShade = ((i % 2 == 0 ? new SolidColorBrush(Color.FromArgb(0xFF, 0xF4, 0xF4, 0xF5)) : new SolidColorBrush(Color.FromArgb(0x3F, 0xFF, 0xFF, 0xFF)))),
                        BorderShade = ((i % 2 == 0 ? new SolidColorBrush(Color.FromArgb(0xFF, 0x11, 0xA8, 0xAB)) : new SolidColorBrush(Color.FromArgb(0xFF, 0xA6, 0xAD, 0xC7))))
                    });

                }

 src.ItemNeeded += (sender, args) =>
            {
                args.Item = Weeks[args.Index];
            };

            src.ItemUpdated += (sender, args) =>
            {
                var item = args.Item as WeekDays;
                item.BorderShade = Weeks[args.Index].BorderShade;
                item.Completed = Weeks[args.Index].Completed;
                item.FillShade = Weeks[args.Index].FillShade;
                item.week = Weeks[args.Index].week;
            };

 public class WeekDays : LoopingListDataItem
    {
        private string _week;
        public string week
        {
            get { return _week; }
            set
            {
                _week = value;
                this.OnPropertyChanged("week");
            }
        }

        private bool done;
        public bool Completed
        {
            get { return done; }
            set
            {
                done = value;
                this.OnPropertyChanged("Completed");
            }
        }

        public SolidColorBrush _FillShade = new SolidColorBrush(Color.FromArgb(0x3F, 0xF4, 0xF4, 0xF5));
        public SolidColorBrush FillShade
        {
            get { return _FillShade; }
            set { _FillShade = value;
            this.OnPropertyChanged("FillShade");
            }
        }

        public SolidColorBrush _BorderShade;
        public SolidColorBrush BorderShade
        {
            get { return _BorderShade; }
            set
            {
                _BorderShade = value;
                this.OnPropertyChanged("BorderShade");
            }
        }

        public WeekDays()
        {
            FillShade = new SolidColorBrush(Color.FromArgb(0x3F, 0xF4, 0xF4, 0xF5));
        }
}

and the xaml

<Style x:Key="LoopingListItemStyle1" TargetType="LoopingList:LoopingListItem">
            <Setter Property="CacheMode" Value="BitmapCache"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="LoopingList:LoopingListItem">
                        <Border x:Name="root" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.2"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Collapsed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="root"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Expanded">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="root">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="root"/>
                                            <DoubleAnimation Duration="0" To=".6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="Circle">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource brLightBlue}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Circle"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="root">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To=".3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="root"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid>
                                <Ellipse x:Name="Circle" Stroke="Transparent" StrokeThickness="2"/>
                                <ContentControl x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" DataContext="{TemplateBinding DataContext}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<telerikPrimitives:RadLoopingList HorizontalAlignment="Left" Margin="0,12,0,0" VerticalAlignment="Top" Grid.Row="3"
            DataSource="{Binding Source}" ItemHeight="120" ItemWidth="120" Orientation="Horizontal" IsCentered="True"
            IsLoopingEnabled="False" ItemStyle="{StaticResource LoopingListItemStyle1}" Foreground="{StaticResource brMidnightBlue}" ItemSpacing="12">
            <telerikPrimitives:RadLoopingList.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Ellipse Fill="{Binding FillShade}" Stroke="{Binding BorderShade}" StrokeThickness="2"/>
                        <TextBlock Text="{Binding week}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </telerikPrimitives:RadLoopingList.ItemTemplate>
        </telerikPrimitives:RadLoopingList>

what is happening is that it loads 4 items up to display and I basically see the circles with the numbers in the centre which represent the week property from the WeekDays class.



When I start to swipe across the screen I see the numbers display like this   (1) (2) (3) (4) (9) (6) (7) (8) (9)

Why did (5) show as (9)?

Now when I scroll back I get the numbers like this (9) (8) (7) (6) (6) (9) (8) (7) (6)

What's happening there?

[Deyan]

Hi Gareth,

Could you please try creating a new item in the ItemNeeded event instead of assigning an existing one to the e.Item property? This should solve the problem.

Regards,
Deyan
Telerik

[Big G]

Yep that solved the problem, thank you!