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

hide buttons on tileviewitem

8 Answers 244 Views

TileView

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

This question is locked. New answers and comments are not allowed.

8 Answers, 1 is accepted

Accepted

answered on 11 Jun 2012, 06:24 PM

Hi Jonam,

Yes it is possible to hide that button. Since the RadTileView was not designed for such an action (the core functionality of RadTileView is the ability to collapse, restore and maximize), we have to dig into the template. I've created a video for you to follow. You will need to use Expression Blend Preview for Silverlight 5 because Expression Blend 4 doesn't support Silverlight 5 controls.

Before you click on the link below, open your project in Blend and locate the RadTileItem you want to remove the button from. You will be creating a template that you can apply to all your other tiles, so you only have to do this once.

Video http://screencast.com/t/KK8Ng1hd

If you do not have Blend, you can copy and paste the custom Style below in manually and then assign the style to your tile items manually.

<!-- Below is the new style that hides the Maximize button. Notice that I manually assign the style to each RadTileItem that I want to hide the button on.-->

<UserControl.Resources>

<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="DisabledBrush" Color="#99FFFFFF"/>

<CornerRadius x:Key="TileView_InneBorder_CornerRadius">1</CornerRadius>

<CornerRadius x:Key="TileView_OuterBorder_CornerRadius">2</CornerRadius>

<SolidColorBrush x:Key="ControlOuterBorder_Selected" Color="#FFFFC92B"/>

<SolidColorBrush x:Key="TileView_MaximizeArea_BorderBrush" Color="#B2FFCD27"/>

<Thickness x:Key="TileView_MaximizeArea_BorderThickness">2</Thickness>

<SolidColorBrush x:Key="TileView_MaximizeArea_Background" Color="#66FFF62D"/>

<LinearGradientBrush x:Key="TileView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFF6F6F6"/>

<GradientStop Color="#FFD2D2D2" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF"/>

<Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>

<LinearGradientBrush x:Key="TileView_ButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF282828"/>

<GradientStop Color="#FF7C7C7C" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TileView_ButtonOuterBorder" Color="#FFFFFFFF"/>

<LinearGradientBrush x:Key="TileView_ButtonBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFEEDB7" Offset="0"/>

<GradientStop Color="#FFFACA6A" Offset="1"/>

<GradientStop Color="#FFFFC94A" Offset="0.526"/>

<GradientStop Color="#FFFEEDB7" Offset="0.509"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="TileView_ButtonBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFECE95" Offset="0"/>

<GradientStop Color="#FFFEB407" Offset="1"/>

<GradientStop Color="#FFFEBB6E" Offset="0.517"/>

<GradientStop Color="#FFE78318" Offset="0.539"/>

</LinearGradientBrush>

<Style x:Key="maximizeToggleStyle" TargetType="telerik:RadToggleButton">

<Setter Property="VerticalAlignment" Value="Center"/>

<Setter Property="HorizontalAlignment" Value="Right"/>

<Setter Property="Width" Value="17"/>

<Setter Property="Height" Value="17"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadToggleButton">

<Grid Background="Transparent">

<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>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">1</CornerRadius>

<SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#FFBFBFBF"/>

<LinearGradientBrush x:Key="TileView_HeaderBorder_HorizontalSplitterOpacityMask" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="Black" Offset="0"/>

<GradientStop Offset="1"/>

</LinearGradientBrush>

<Style x:Key="TileViewItemHeaderStyle1" TargetType="Telerik_Windows_Controls_TileView:TileViewItemHeader">

<Setter Property="Background" Value="{StaticResource TileView_HeaderBackground}"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Telerik_Windows_Controls_TileView:TileViewItemHeader">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="TileStates">

<VisualState x:Name="Maximized">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="MaximizeToggleButton">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Boolean>True</System:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Restored">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="MaximizeToggleButton">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Boolean>False</System:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<StackPanel>

<Border BorderBrush="{StaticResource TileView_HeaderBorder}" BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}" Padding="10 0 7 0">

<Grid MinHeight="28">

<Border x:Name="GripBarElement" Background="Transparent">

<ContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="Left" Margin="0,0,10,0" VerticalAlignment="Center"/>

</Border>

<telerik:RadToggleButton x:Name="MaximizeToggleButton" Command="Telerik_Windows_Controls_TileView:TileViewCommands.ToggleTileState" Style="{StaticResource maximizeToggleStyle}" Visibility="Collapsed"/>

</Grid>

</Border>

<Border x:Name="Splitter" BorderThickness="0" Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}" Height="4" OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}"/>

</StackPanel>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="RadTileViewItemStyle1" 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="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">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver"/>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectedItem">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unselected"/>

</VisualStateGroup>

<VisualStateGroup x:Name="MouseOverDraggingStates">

<VisualState x:Name="MouseOverDragging">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseNotOverDragging"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="outerBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" Margin="{TemplateBinding Padding}">

<Border x:Name="outerContainer" BorderBrush="{StaticResource TileView_InneBorder}" BorderThickness="{StaticResource TileView_InneBorder_Thickness}" Background="Transparent" CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Telerik_Windows_Controls_TileView:TileViewItemHeader x:Name="HeaderPart" HeaderTemplate="{TemplateBinding HeaderTemplate}" Style="{StaticResource TileViewItemHeaderStyle1}"/>

<Grid Background="Transparent" Grid.Row="1">

<ContentPresenter x:Name="ContentElement" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

</Grid>

<Rectangle x:Name="DisabledVisual" Fill="{StaticResource DisabledBrush}" RadiusY="4" RadiusX="4" Grid.RowSpan="2" Visibility="Collapsed"/>

</Grid>

</Border>

<Grid x:Name="SelectedItem" Margin="-1" Visibility="Collapsed">

<Border BorderBrush="{StaticResource ControlOuterBorder_Selected}" BorderThickness="2" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" Margin="{TemplateBinding Padding}"/>

</Grid>

<Border x:Name="MouseOverBorder" BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}" BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}" Background="{StaticResource TileView_MaximizeArea_Background}" Opacity="0.5" Visibility="Collapsed"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<telerik:RadTileView MinimizedItemsPosition="Bottom">

<telerik:RadTileViewItem TileState="Maximized" Header="Item1" Style="{StaticResource RadTileViewItemStyle1}">

<TextBlock Text="Item1 Content"/>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem IsEnabled="False" Header="Item2">

<TextBlock Text="Item2 Content"/>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem Header="Item3" >

<TextBlock Text="Item3 Content"/>

</telerik:RadTileViewItem>

</telerik:RadTileView>

</Grid>

I hope this gives you what you are looking for, Good Luck!
Lancelot

Accepted

answered on 12 Jun 2012, 03:38 PM

Hi Jonam,

Your request is just in time, because telerik released a new version of the RadControls a couple days ago that allows implicit styling. Implicit styles let you use the Metro theme in your buttonless style and give you the effect that you want!

If we were to set the theme to Metro in the RadTileView, it would automatically override the style we created that hides the button. So up until now, you had to choose between the default theme with the hidden button OR the Metro theme with a visible button.

This link will bring you to the documentation on how to use implicit styling. Take an little time to learn how it works, it will prove to be very useful for you in the future since you plan on integrating your own styles with telerik themes. I can't just write you a block of code that you can plug in, because as you'll see in the documentation, you need to merge the dictionaries to get your own custom theme.

Good Luck and let me know how it goes!
Lancelot

Accepted

answered on 15 Jun 2012, 02:00 PM

Hi Jonam,

If you want to disable the tile's ability to dock or maximize, you can just set the MaximizeMode property. This link will bring you to the documentation to learn more. Basically, by setting that property to Zero, you force the tile to stay in the "Restored" state.

In your case try this...

<telerik:RadTileView x:Name="JonamTile1" MaximizeMode="Zero" >
      <tile items here>
      <tile items here>
      <tile items here>
</telerik:RadTileView>

I hope this helps, if it does, please mark the post as "Answer" so that other community members can see you've found a solution. If it doesnt work, let me know and I'll find another way to make it happen.

Good Luck!
Lancelot

answered on 12 Oct 2012, 11:43 AM

Hello Andrew,
Unfortunately there's no property to hide the maximize button and that's why you'll have to edit the HeaderStyle of the RadTileViewItems with something like this:

<LinearGradientBrush x:Key="TileView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFF6F6F6" />

<GradientStop Color="#FFD2D2D2" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF" />

<Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>

<CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">2</CornerRadius>

<LinearGradientBrush x:Key="TileView_HeaderBorder_HorizontalSplitterOpacityMask"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="Black" Offset="0" />

<GradientStop Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#FFBFBFBF" />

....

<Style TargetType="telerik:RadTileViewItem">

<Setter Property="HeaderStyle">

<Setter.Value>

<Style TargetType="tileView:TileViewItemHeader">

<Setter Property="Background" Value="{StaticResource TileView_HeaderBackground}" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="tileView:TileViewItemHeader">

<Grid>

<StackPanel>

<Border Background="{TemplateBinding Background}"

BorderBrush="{StaticResource TileView_HeaderBorder}"

BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}"

CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}"

Padding="10 0 7 0">

<Grid MinHeight="28">

<Border x:Name="GripBarElement" Background="Transparent">

<ContentPresenter x:Name="HeaderElement"

Margin="0,0,10,0"

HorizontalAlignment="Left"

VerticalAlignment="Center"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

</Border>

</Grid>

</Border>

<Border x:Name="Splitter"

Height="4"

Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}"

BorderThickness="0"

OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}" />

</StackPanel>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Setter.Value>

</Setter>

</Style>

If you have further questions please feel free to ask.

Greetings,
Zarko
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.