Looping list visual items style

[Add-in Express]

Hello guys,

I've read the online (of course, the offline too) documentation for Windows Phone controls and still don't have any clue how to customize described properties (for example,the Background property of the LayoutRoot border inside the template of the visual items). I am interested in customizing properties that were described in the Styling LoopingListItem section. Could you please provide me with a step-by-step instruction for that? 

When I edit the items style or template in Expression Blend I get the following markup:

<telerikPrimitives:RadLoopingList HorizontalAlignment="Left" Margin="78,24,0,22" Width="156">

        <telerikPrimitives:RadLoopingList.Resources>

            <Style x:Key="RadLoopingListStyle1" TargetType="telerikPrimitives:RadLoopingList">

                <Setter Property="Background" Value="#00ffffff"/>

                <Setter Property="ItemTemplate">

                    <Setter.Value>

                        <DataTemplate>

                            <TextBlock Text="{Binding Text}"/>

                        </DataTemplate>

                    </Setter.Value>

                </Setter>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="telerikPrimitives:RadLoopingList">

                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsHitTestVisible="True" Margin="{TemplateBinding Padding}">

                                <LoopingList:LoopingPanel x:Name="itemsPanel" HorizontalAlignment="Center"/>

                            </Border>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

        </telerikPrimitives:RadLoopingList.Resources>

        <telerikPrimitives:RadLoopingList.Style>

            <StaticResource ResourceKey="RadLoopingListStyle1"/>

        </telerikPrimitives:RadLoopingList.Style>

    </telerikPrimitives:RadLoopingList>


As you may see there is no LayoutRoot border inside the Item template. Am I right?


Regards from Belarus,
Eugene Astafiev

[Deyan]

Hello Irina,

Thanks for writing.

You will need to modify the style for the LoopingListItem component in order to change the way it looks. Then, you will need to set the ItemStyle property exposed by RadLoopingList in order to use the customized style. Here's the default LoopingListItem style for your convenience:

<Style 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"
                          BorderBrush="{StaticResource PhoneInactiveBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          Margin="{TemplateBinding Padding}"
                          Background="{TemplateBinding Background}">

                      <VisualStateManager.VisualStateGroups>
                          <VisualStateGroup x:Name="CommonStates">

                              <VisualStateGroup.Transitions>
                                  <VisualTransition GeneratedDuration="0:0:0.2"/>
                              </VisualStateGroup.Transitions>

                              <VisualState x:Name="Collapsed">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="root" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                                  </Storyboard>
                              </VisualState>

                              <VisualState x:Name="Expanded">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="root">
                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                      </ObjectAnimationUsingKeyFrames>
                                      <DoubleAnimation Storyboard.TargetName="root" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                      <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" To=".6" Duration="0"/>
                                  </Storyboard>
                              </VisualState>

                              <VisualState x:Name="Selected">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="root">
                                          <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                      </ObjectAnimationUsingKeyFrames>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="root">
                                          <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                      </ObjectAnimationUsingKeyFrames>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
                                          <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                      </ObjectAnimationUsingKeyFrames>
                                      <DoubleAnimation Storyboard.TargetName="root" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                      <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                  </Storyboard>
                              </VisualState>

                              <VisualState x:Name="Disabled">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="root">
                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                      </ObjectAnimationUsingKeyFrames>
                                      <DoubleAnimation Storyboard.TargetName="root" Storyboard.TargetProperty="Opacity" To=".3" Duration="0"/>
                                  </Storyboard>
                              </VisualState>

                          </VisualStateGroup>
                      </VisualStateManager.VisualStateGroups>

                      <ContentControl x:Name="contentPresenter" Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      DataContext="{TemplateBinding DataContext}"
                                      Padding="{TemplateBinding Padding}"/>

                  </Border>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

I hope this helps.

Regards,
Deyan
the Telerik team

[Add-in Express]

Hello Deyan,

Thank you for the snippet of markup.

But posting such pieces of markup here is not a good solution, right? Should it be generated automatically in Blend or Visual Studio 2012 according to the documentation? Why do I see another markup generated? 

Regards from Belarus,
Eugene Astafiev

[Valentin.Stoychev]

Hello Irina,

Yes - you are correct. Those styles should be generated automatically in Blend/VS.

The problem is that there are certain problems with the designers of these two products. We are working closely with the Visual Studio team at Microsoft to see what is the reason of the problematic behavior.

For the moment the best you can do is to get the styles from the source - this way you will be sure that they are the most current ones.

We hope that soon we will have  a solution which will work with the designers in VS and Blend.

Greetings, Valentin.Stoychev
the Telerik team

[Add-in Express]

Hello Valentine,

Actually, I thought that Update 2 would fix all the issues with third-party Windows Phone controls that I am aware of. But it has brought new ones! :)

Regards from Belarus,
Eugene Astafiev

[Valentin.Stoychev]

Hello Eugene,

Unfortunately, sometimes the things are not in our control entirely. This is the case with extracting the styles from Visual Studio.

We will do our best to fix it as soon as possible.

Your feedback and reports are invaluable, so please keep them coming!

Kind regards, Valentin.Stoychev
the Telerik team