TileItems are over writing my style

2 posts, 0 answers
  1. Brian
    Brian avatar
    1 posts
    Member since:
    Mar 2011

    Posted 04 Mar 2011 Link to this post

    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;
                        }
                    }
                }
            }
        }
    }
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 08 Mar 2011 Link to this post

    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!
  3. DevCraft banner
Back to Top