This is a migrated thread and some comments may be shown as answers.

How to Make the First Tile Maximized

3 Answers 69 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Gopi
Top achievements
Rank 1
Gopi asked on 18 Jun 2012, 01:03 PM
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

3 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 21 Jun 2012, 08:23 AM
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 >>

0
Abdullah
Top achievements
Rank 1
answered on 21 Jun 2012, 12:18 PM
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
0
Petar Mladenov
Telerik team
answered on 26 Jun 2012, 08:56 AM
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 >>

Tags
TileView
Asked by
Gopi
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Abdullah
Top achievements
Rank 1
Share this question
or