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

TileItems are over writing my style

1 Answer 92 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 04 Mar 2011, 04:03 PM
Hello I'm new here and somewhat of a novice to C# and Xaml.  My home office wanted me to get up to speed and learn Blend with Telerik TileView. I was able to track down the code that was causing the issue I just cant tell why its doing it.  This C# code overwriting my custom style I made for TileView.
public MainPage()
        {
            InitializeComponent();
            MyDataContext context = new MyDataContext();
            context.TileItems = GenerateTileItems();
            this.DataContext = context;
        }
         
        private List<TileItem> GenerateTileItems()
        {
            List<TileItem> result = new List<TileItem>();
 
            for (int j = 1; j < 6; j++)
            {
                TileItem item = new TileItem() { Header = String.Format("Header {0}", j) };
 
                for (int i = 0; i < 10; i++)
                {
                    item.DataItems.Add(new DataItem()
                    {
                        Address = String.Format("Address {0}", i),
                        Name = String.Format("Name {0}", i)
                    });
                }
 
                result.Add(item);
            }
            return result;
        }

It wont let me attach a zip of my project so I posted the MainPage.xaml and the MainPage.xaml.cs below.

Xaml
<UserControl x:Class="SilverlightApplication1.MainPage"
             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"
             xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
             xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
             xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
             xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
             xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
             xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d" Width="1280" Height="720">
    <UserControl.Resources>
        <DataTemplate x:Key="HeaderTemplate">
            <TextBlock Text="{Binding Header}"/>
        </DataTemplate>
 
        <DataTemplate x:Key="ContentTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Normal">
                <!--Small Content-->
                <telerik:RadFluidContentControl.SmallContent>
                    <Image Source="images/risk_red.png" Width="247" VerticalAlignment="Top"/>
                </telerik:RadFluidContentControl.SmallContent>
                 
                <!--Normal Content-->
                <telerik:RadFluidContentControl.Content>
                    <telerikChart:RadChart UseDefaultLayout="False">
                        <telerikCharting:ChartArea LegendName="ChartLegendManufacturers" VerticalAlignment="Stretch"
                                                   HorizontalAlignment="Stretch">
                            <telerikCharting:ChartArea.DataSeries>
                                <telerikCharting:DataSeries>
                                    <telerikCharting:DataSeries.Definition>
                                        <telerikCharting:DoughnutSeriesDefinition ItemLabelFormat="p">
                                        </telerikCharting:DoughnutSeriesDefinition>
                                    </telerikCharting:DataSeries.Definition>
                                    <telerikCharting:DataPoint YValue="0.215208267" LegendLabel="Toyota"/>
                                    <telerikCharting:DataPoint YValue="0.192960612" LegendLabel="General Motors"/>
                                    <telerikCharting:DataPoint YValue="0.151830229" LegendLabel="Volkswagen"/>
                                    <telerikCharting:DataPoint YValue="0.125964366" LegendLabel="Ford"/>
                                    <telerikCharting:DataPoint YValue="0.091152353" LegendLabel="Honda"/>
                                    <telerikCharting:DataPoint YValue="0.079093251" LegendLabel="Nissan"/>
                                    <telerikCharting:DataPoint YValue="0.079093251" LegendLabel="PSA"/>
                                    <telerikCharting:DataPoint YValue="0.06469767" LegendLabel="Hyundai"/>
                                </telerikCharting:DataSeries>
                            </telerikCharting:ChartArea.DataSeries>
                        </telerikCharting:ChartArea>
                    </telerikChart:RadChart>
                </telerik:RadFluidContentControl.Content>
 
                <!--Large Content-->
                <telerik:RadFluidContentControl.LargeContent>
                    <telerikChart:RadChart UseDefaultLayout="False">
                        <telerikCharting:ChartArea LegendName="ChartLegendManufacturers" VerticalAlignment="Stretch"
                                                   HorizontalAlignment="Stretch">
                            <telerikCharting:ChartArea.DataSeries>
                                <telerikCharting:DataSeries>
                                    <telerikCharting:DataSeries.Definition>
                                        <telerikCharting:DoughnutSeriesDefinition ItemLabelFormat="p">
                                        </telerikCharting:DoughnutSeriesDefinition>
                                    </telerikCharting:DataSeries.Definition>
                                    <telerikCharting:DataPoint YValue="0.215208267" LegendLabel="Toyota"/>
                                    <telerikCharting:DataPoint YValue="0.192960612" LegendLabel="General Motors"/>
                                    <telerikCharting:DataPoint YValue="0.151830229" LegendLabel="Volkswagen"/>
                                    <telerikCharting:DataPoint YValue="0.125964366" LegendLabel="Ford"/>
                                    <telerikCharting:DataPoint YValue="0.091152353" LegendLabel="Honda"/>
                                    <telerikCharting:DataPoint YValue="0.079093251" LegendLabel="Nissan"/>
                                    <telerikCharting:DataPoint YValue="0.079093251" LegendLabel="PSA"/>
                                    <telerikCharting:DataPoint YValue="0.06469767" LegendLabel="Hyundai"/>
                                </telerikCharting:DataSeries>
                            </telerikCharting:ChartArea.DataSeries>
                        </telerikCharting:ChartArea>
                    </telerikChart:RadChart>
                </telerik:RadFluidContentControl.LargeContent>
            </telerik:RadFluidContentControl>  
        </DataTemplate>
        <SolidColorBrush x:Key="TileView_Background" Color="#FFFFFFFF" />
        <SolidColorBrush x:Key="TileView_OuterBorder" Color="#FF848484" />
        <SolidColorBrush x:Key="TileView_InneBorder" Color="#FFFFFFFF" />
        <Thickness x:Key="TileView_InneBorder_Thickness">1</Thickness>
        <SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF" />
        <Thickness x:Key="TileView_HeaderBorder_Thickness">0</Thickness>
        <LinearGradientBrush x:Key="TileView_HeaderBackground" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="White" />
            <GradientStop Offset="1" Color="#FFDDE4EC" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="TileView_ButtonBackground" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="#FF768CA3" />
            <GradientStop Offset="1" Color="#FFB2BFCE" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TileView_ButtonOuterBorder" Color="#FFFFFFFF" />
        <LinearGradientBrush x:Key="TileView_ButtonBackground_MouseOver" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFB2BFCE" />
            <GradientStop Offset="1" Color="#FF768CA3" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="TileView_ButtonBackground_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FF768CA3" />
            <GradientStop Offset="1" Color="#FF273B53" />
        </LinearGradientBrush>
        <CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">0</CornerRadius>
        <SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#FFB2BFCE" />
        <LinearGradientBrush x:Key="TileView_HeaderBorder_HorizontalSplitterOpacityMask" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="Black" />
            <GradientStop Offset="1" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="DisabledBrush" Color="#99FFFFFF" />
        <CornerRadius x:Key="TileView_InneBorder_CornerRadius">3</CornerRadius>
        <CornerRadius x:Key="TileView_OuterBorder_CornerRadius">2</CornerRadius>
        <Style x:Key="nfocus" TargetType="telerik:RadTileViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Background" Value="{StaticResource TileView_Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TileView_OuterBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="7"/>
            <Setter Property="TileState" Value="Restored"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadTileViewItem">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Margin="{TemplateBinding Padding}" BorderThickness="{StaticResource TileView_InneBorder_Thickness}" CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}" BorderBrush="#FFB2BFCE" Padding="0,5" Background="White">
                                <Border.Effect>
                                    <DropShadowEffect Direction="275" Opacity="0.5" ShadowDepth="1" Color="#FF768CA3" BlurRadius="5"/>
                                </Border.Effect>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <ContentPresenter x:Name="ContentElement" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    <Grid x:Name="ContentCacheHost" Grid.Row="1" />
                                    <StackPanel Margin="0" Background="Black">
                                        <Border BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}" Background="{StaticResource TileView_HeaderBackground}" CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}" Padding="10 0 7 0" Height="23">
                                            <Grid MinHeight="28">
                                                <Border x:Name="GripBarElement" Background="Transparent" Margin="0,-5,0,5">
                                                    <ContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="Left" Margin="0,0,10,0" VerticalAlignment="Center"/>
                                                </Border>
                                                <ToggleButton x:Name="MaximizeToggleButton" HorizontalAlignment="Right" Width="17" Margin="0,1,0,10">
                                                    <ToggleButton.Template>
                                                        <ControlTemplate TargetType="ToggleButton">
                                                            <Grid>
                                                                <VisualStateManager.VisualStateGroups>
                                                                    <VisualStateGroup x:Name="FocusStates">
                                                                        <VisualState x:Name="Focused"/>
                                                                        <VisualState x:Name="Unfocused"/>
                                                                    </VisualStateGroup>
                                                                    <VisualStateGroup x:Name="CommonStates">
                                                                        <VisualState x:Name="Disabled"/>
                                                                        <VisualState x:Name="Normal"/>
                                                                        <VisualState x:Name="MouseOver">
                                                                            <Storyboard>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                            </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Pressed">
                                                                            <Storyboard>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                            </Storyboard>
                                                                        </VisualState>
                                                                    </VisualStateGroup>
                                                                    <VisualStateGroup x:Name="CheckStates">
                                                                        <VisualState x:Name="Checked">
                                                                            <Storyboard>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                                                        <DiscreteObjectKeyFrame.Value>
                                                                                            <Visibility>Collapsed</Visibility>
                                                                                        </DiscreteObjectKeyFrame.Value>
                                                                                    </DiscreteObjectKeyFrame>
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                                                        <DiscreteObjectKeyFrame.Value>
                                                                                            <Visibility>Visible</Visibility>
                                                                                        </DiscreteObjectKeyFrame.Value>
                                                                                    </DiscreteObjectKeyFrame>
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                            </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Unchecked">
                                                                            <Storyboard>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                                                        <DiscreteObjectKeyFrame.Value>
                                                                                            <Visibility>Visible</Visibility>
                                                                                        </DiscreteObjectKeyFrame.Value>
                                                                                    </DiscreteObjectKeyFrame>
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                                                        <DiscreteObjectKeyFrame.Value>
                                                                                            <Visibility>Collapsed</Visibility>
                                                                                        </DiscreteObjectKeyFrame.Value>
                                                                                    </DiscreteObjectKeyFrame>
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                            </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Indeterminate"/>
                                                                    </VisualStateGroup>
                                                                </VisualStateManager.VisualStateGroups>
                                                                <Grid x:Name="Restore" Background="Transparent" Height="13" Width="13">
                                                                    <ToolTipService.ToolTip>
                                                                        <ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMaximizeText"/>
                                                                    </ToolTipService.ToolTip>
                                                                    <Path x:Name="RestoreIcon" Data="M2,5 L2,8.9999999 6,8.9999999 6,5 z M0,3 L8,3 8,5 8,8.9999999 8,11 0,11 0,8.9999999 0,5 z M3,0 L11,0 11,2 11,8.9999999 9,8.9999999 9,2 3,2 z" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>
                                                                    <Path Data="M1,12 L9,12 9,13 1,13 z M3.9999999,7 L3.9999999,9 6,9 6,7 z M3,6 L7,6 7,7 7,9 7,10 3,10 3,9 3,7 z M0,4 L1,4 1,12 0,12 z M12,1 L13,1 13,10 12,10 z M3,1 L3.9999999,1 3.9999999,3 10,3 10,4 10,10 12,10 12,11 10,11 10,12 9,12 9,4 1,4 1,3 3,3 z M3.9999999,0 L12,0 12,1 3.9999999,1 z" Fill="{StaticResource TileView_ButtonOuterBorder}" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>
                                                                </Grid>
                                                                <Grid x:Name="Collapse" Background="Transparent" Height="5" Visibility="Collapsed" Width="12">
                                                                    <ToolTipService.ToolTip>
                                                                        <ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMinimizeText"/>
                                                                    </ToolTipService.ToolTip>
                                                                    <Rectangle Fill="{StaticResource TileView_ButtonOuterBorder}" Stroke="{x:Null}" StrokeThickness="0.5"/>
                                                                    <Rectangle x:Name="CollapseIcon" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stroke="{x:Null}" StrokeThickness="0.5"/>
                                                                </Grid>
                                                            </Grid>
                                                        </ControlTemplate>
                                                    </ToggleButton.Template>
                                                </ToggleButton>
                                            </Grid>
                                        </Border>
                                        <Border x:Name="Splitter" BorderThickness="0" Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}" Height="1"/>
                                    </StackPanel>
                                    <Rectangle x:Name="DisabledVisual" Fill="{StaticResource DisabledBrush}" RadiusY="4" RadiusX="4" Grid.RowSpan="2" Visibility="Collapsed"/>
                                </Grid>
                            </Border>
                            <Rectangle Fill="#FFB2BFCE" HorizontalAlignment="Right" Height="28" Margin="0,8,37,0" Stroke="{x:Null}" StrokeThickness="0.5" VerticalAlignment="Top" Width="1"/>
                            <Rectangle Fill="White" HorizontalAlignment="Right" Height="28" Margin="0,8,38,0" Stroke="{x:Null}" StrokeThickness="0.5" VerticalAlignment="Top" Width="1"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <ImageBrush x:Key="NoiseBrush" ImageSource="Images/noise_light-80.png"/>
    </UserControl.Resources>
     
     
        <Grid x:Name="LayoutRoot">
            <Grid.OpacityMask>
                <ImageBrush Stretch="Fill"/>
            </Grid.OpacityMask>
            <Grid.Background>
                <ImageBrush ImageSource="Images/noiseBG.png">
                    <ImageBrush.RelativeTransform>
                        <CompositeTransform CenterY="0.5" CenterX="0.5"/>
                    </ImageBrush.RelativeTransform>
                </ImageBrush>
            </Grid.Background>
            <telerik:RadTileView IsItemDraggingEnabled="False"
                                               ItemsSource="{Binding TileItems}"
                                               TileStateChanged="RadTileView_TileStateChanged"
                                               ItemTemplate="{StaticResource HeaderTemplate}"
                                               ContentTemplate="{StaticResource ContentTemplate}">
                <telerik:RadTileViewItem TileState="Maximized" Style="{StaticResource nfocus}" />
                <telerik:RadTileViewItem Style="{StaticResource nfocus}" Width="250" />
                <telerik:RadTileViewItem Style="{StaticResource nfocus}" />
                <telerik:RadTileViewItem Style="{StaticResource nfocus}" />
                <telerik:RadTileViewItem Style="{StaticResource nfocus}" />
            </telerik:RadTileView>
        </Grid>
 
</UserControl>

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;
 
namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            MyDataContext context = new MyDataContext();
            context.TileItems = GenerateTileItems();
            this.DataContext = context;
        }
         
        private List<TileItem> GenerateTileItems()
        {
            List<TileItem> result = new List<TileItem>();
 
            for (int j = 1; j < 6; j++)
            {
                TileItem item = new TileItem() { Header = String.Format("Header {0}", j) };
 
                for (int i = 0; i < 10; i++)
                {
                    item.DataItems.Add(new DataItem()
                    {
                        Address = String.Format("Address {0}", i),
                        Name = String.Format("Name {0}", i)
                    });
                }
 
                result.Add(item);
            }
            return result;
        }
         
        private void RadTileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            RadTileViewItem item = e.Source as RadTileViewItem;
 
            if (item != null)
            {
                IList<RadFluidContentControl> mylist = item.ChildrenOfType<RadFluidContentControl>();
                if (mylist.Count > 0 && mylist[0] != null)
                {
                    RadFluidContentControl contentControl = mylist[0];
                    switch (item.TileState)
                    {
                        case TileViewItemState.Maximized:
                            contentControl.State = FluidContentControlState.Large;
                            break;
                        case TileViewItemState.Minimized:
                            contentControl.State = FluidContentControlState.Small;
                            break;
                        case TileViewItemState.Restored:
                            contentControl.State = FluidContentControlState.Normal;
                            break;
                    }
                }
            }
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 08 Mar 2011, 01:47 PM
Hello Brian,

You have both added TileView items in xaml and from code behind. This way the items added from code behind are with higher priority. In order to apply the redefined style in xaml to all the RadTileViewitems, just remove the key of the style. The described approach is realized in the attached solution. So please give it a try and let me know if it fits in your scenario.

Greetings,
Petar Mladenov
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Tags
TileView
Asked by
Brian
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Share this question
or