How to Make the First Tile Maximized

4 posts, 0 answers
  1. Gopi
    Gopi avatar
    8 posts
    Member since:
    Apr 2012

    Posted 18 Jun 2012 Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 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
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 21 Jun 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Abdullah
    Abdullah avatar
    4 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    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
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 26 Jun 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top