[Solved] Close button in RadTileView

[Baskaran]

Hi,

I am new to RadTileView. I want to add the close button in RadTileView.
Pls find below the code.

<local:Base x:Class="RTI.MediBus.View.PatientView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:RTI.MediBus.View"
    xmlns:tNav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:tDock="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    xmlns:mscui="clr-namespace:Microsoft.Cui.Controls;assembly=Microsoft.Cui.Controls"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <local:FrameworkElementConverter x:Key="FrameworkElementConverter" />

            <DataTemplate x:Key="TileItemTemplate">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" />

                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Key="TileContentTemplate">
                <ScrollViewer Width="Auto" Height="Auto">
                    <!--<local:WidgetContainer SummaryViewType="{Binding Type}" />-->
                    <ContentControl Content="{Binding Type,Converter={StaticResource FrameworkElementConverter}}"
                                    HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                </ScrollViewer>
            </DataTemplate>
            <DataTemplate x:Key="DashboardHeaderTemplate">
                <Border>
                    <Border.Background>
                        <LinearGradientBrush>
                            <GradientStop Color="AliceBlue" Offset="0" />
                            <GradientStop Color="LightBlue" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock Text="Dashboard" FontFamily="Arial"  FontSize="13" FontWeight="Bold"/>
                </Border>
            </DataTemplate>
            <DataTemplate x:Key="EncounterHeaderTemplate">
                <Border>
                    <Border.Background>
                        <LinearGradientBrush>
                            <GradientStop Color="AliceBlue" Offset="0" />
                            <GradientStop Color="LightBlue" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock Text="Encounters" FontFamily="Arial"  FontSize="13" FontWeight="Bold"/>
                </Border>
            </DataTemplate>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel x:Name="pnlPatientBanner" Grid.Row="0">
            <local:PatientBanner x:Name="uiPatientBanner" Width="auto" Height="auto" MaximizeSelectedWidget="patientBanner_MaximizeSelectedWidget"/>
        </StackPanel>
        <tDock:RadDocking Grid.Row="1" >
            <tDock:RadDocking.DocumentHost>
                <tDock:RadSplitContainer>
                    <tDock:RadPaneGroup>
                        <tDock:RadPane Header="Patient Care" CanUserClose="False" BorderThickness="0" >
                            <tNav:RadTileView Name="PatientWidgets" MaximizeMode="One" ItemsSource="{Binding Widgets}"
                                              ItemTemplate="{StaticResource TileItemTemplate}"
                                              ContentTemplate="{StaticResource TileContentTemplate}"
                                              ScrollViewer.VerticalScrollBarVisibility="Auto">
                            </tNav:RadTileView>
                        </tDock:RadPane>
                    </tDock:RadPaneGroup>
                </tDock:RadSplitContainer>
            </tDock:RadDocking.DocumentHost>
            <tDock:RadSplitContainer InitialPosition="DockedLeft" >
                <tDock:RadPaneGroup>
                    <!--Dashboard Pane-->
                    <tDock:RadPane Header="Dashboard" HeaderTemplate="{StaticResource DashboardHeaderTemplate}" CanUserClose="False">
                        <local:PatientDashboard x:Name="uiPatientDashboard" Width="auto" Height="auto" MaximizeSelectedWidget="patientBanner_MaximizeSelectedWidget"></local:PatientDashboard>
                    </tDock:RadPane>
                    <!--Encounter Pane-->
                    <tDock:RadPane IsSelected="False" Header="Encounters" HeaderTemplate="{StaticResource EncounterHeaderTemplate}" CanUserClose="False">
                        <local:PatientEncounters x:Name="uiPatientEncounter" Width="auto" Height="auto"/>
                    </tDock:RadPane>
                </tDock:RadPaneGroup>
            </tDock:RadSplitContainer>
        </tDock:RadDocking>
    </Grid>
</local:Base>

[Kiril Stanoev]

Hi Baskaran,

There are couple of approaches to achieve what you are looking for. In the first approach you have to edit the Style of RadTileViewItem and put the close button there. Please see attachment #1 for further reference.

The second approach is to set the HeaderTemplate of the generated TileViewItem. Please see attachment #2 for more information.

Let me know if you have additional questions or comments.

On a side note, I'd like to inform you that we've just released an online tool that allows you to reduce the size of your Silverlight applications. For more information, please visit http://blogs.telerik.com/blogs/posts/10-06-10/telerik_assembly_minifier.aspx

Greetings,
Kiril Stanoev
the Telerik team