How to Make the First Tile Maximized

[Gopi]

Hi Team,

i have designed the RadTileView in the application and set the Default Fluid State to Normal in the XAML.

When i execute all the tiles are opened in normal mode, but i want the first tile alone should be maximized, and others should be in Normal State. 

How to do this in the Code ? need your help on this.

Below is my code :

<UserControl x:Class="GaugeDemo.GaugeDemo"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>

        <DataTemplate x:Key="contentTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                            State="Normal"
                                            Background="White">
                <telerik:RadFluidContentControl.Content>
                    <telerik:RadSemicircleNorthGauge Background="White" telerik:StyleManager.Theme="Office_Silver">
                        <telerik:RadialScale Min="0" Max="75"
                                             MajorTickStep="25">
                            <telerik:RadialScale.Ranges>
                                <telerik:GaugeRange x:Name="GreenRange"
                                                    Min="0" Max="25"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Green"
                                                    Background="Green"
                                                    IndicatorBackground="Green"  />
                                <telerik:GaugeRange x:Name="YellowRange"
                                                    Min="25" Max="50"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Yellow"
                                                    Background="Yellow"
                                                    IndicatorBackground="Yellow" />
                                <telerik:GaugeRange x:Name="RedRange"
                                                    Min="50" Max="75"
                                                    StartWidth="0.02"
                                                    EndWidth="0.02"
                                                    TickBackground="Red"
                                                    Background="Red"
                                                    IndicatorBackground="Red" />

                                <telerik:GaugeRangeGroup Location="Inside"
                                                         Offset="0.25">

                                    <telerik:GaugeRange Min="0" Max="25"
                                                    StartWidth="0.1"
                                                    EndWidth="0.1"
                                                    TickBackground="Green"
                                                    Background="Green"
                                                    IndicatorBackground="Green"  />

                                    <telerik:GaugeRange Min="25" Max="50"
                                                    StartWidth="0.1"
                                                    EndWidth="0.1"
                                                    TickBackground="Yellow"
                                                    Background="Yellow"
                                                    IndicatorBackground="Yellow" />

                                    <telerik:GaugeRange Min="50" Max="75"
                                                    StartWidth="0.1"
                                                    EndWidth="0.1"
                                                    TickBackground="Red"
                                                    Background="Red"
                                                    IndicatorBackground="Red" />

                                </telerik:GaugeRangeGroup>

                            </telerik:RadialScale.Ranges>
                            <telerik:RadialScale.Indicators>
                                <!--<telerik:BarIndicator x:Name="radialBar"
                                                      telerik:ScaleObject.Location="Inside"
                                                      telerik:ScaleObject.Offset="0.25"
                                                      Value="75"
                                                      UseRangeColor="True"
                                                      RangeColorMode="ProportionalBrush">
                                </telerik:BarIndicator>-->
                                <telerik:Needle Name="needleNorth" IsAnimated="True" Value="50" />
                                <telerik:Pinpoint />
                            </telerik:RadialScale.Indicators>
                        </telerik:RadialScale>
                    </telerik:RadSemicircleNorthGauge>
                </telerik:RadFluidContentControl.Content>
            </telerik:RadFluidContentControl>
        </DataTemplate>

    </UserControl.Resources>


    <Grid x:Name="LayoutRoot" Background="White">


        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Background="#f2f2f2" BorderThickness="1" BorderBrush="#a0a0a0" Margin="0"/>

        <telerik:RadTileView  x:Name="radTileView"
                              ContentTemplate="{StaticResource contentTemplate}"
                              MinimizedItemsPosition="Left"
                              Grid.Row="1">
        </telerik:RadTileView>


    </Grid>
</UserControl>

Code Behind :

namespace GaugeDemo
{
    public partial class GaugeDemo : UserControl
    {
        private ObservableCollection<object> collection = new ObservableCollection<object>();

        public GaugeDemo()
        {
            InitializeComponent();
            collection.Add(new { NeedleValue = 50 });
            collection.Add(new { NeedleValue = 60 });
            collection.Add(new { NeedleValue = 70 });
            radTileView.ItemsSource = collection;
        }
    }
}

Need your help on this.

Thanks & Regards,
Gopi V

[Petar Mladenov]

Hi Gopi,

 You can bind the TileState property of the RadTileViewItems to property from your ViewModels. Similar approach is realized in this help article which uses telerik ContainerBindings to bind the TileState.
 In Silverlight 5 you can take advantage of StyleBindings, just like the way this is usually usually in WPF4.

All the best,
Petar Mladenov
the Telerik team

[Abdullah]

Hi Peter,

I too want to bind the state of the tiles, but am using WPF4.  I have tried the approach you have highlighted in your link but this fails because it is specific to SL (I think - no reference to ContainerBindingCollection).  Could you please advise on how I would achieve this is WPF?

Many Thanks
Abs

[Petar Mladenov]

Hi Abdullah,

 Please check out the corresponding WPF4 article.
 Basically, every ContainerBinding in Silverlight 4 which looks like:

<telerik:ContainerBinding PropertyName="PropertyOfYourContainer"
           Binding="{Binding YourBusinessObjectProperty}" />

replaces the usual Style Binding from WPF (now also available in SL 5):

<Style TargetType="YourContainerType" >

    <Setter Property="PropertyOfYourContainer"


            Value="{Binding YourBusinessObjectProperty 


Kind regards,
Petar Mladenov
the Telerik team