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

Maximize specific tile using event from fluid content control small content data template of

3 Answers 66 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 31 May 2013, 02:45 AM
Hi Telerik

I have defined a tileview using a data template and a radfluidcontentcontrol. The small content definition includes a button which initiates some data fetches in order to create a view which is then placed in a binding in the largecontent template. I want to be able to bind the maximizing of a particular tile to the IsVisibleChanged event on a textblock in the small content template for that tile. (The text block is made visible once the view to be placed in the large content has been created). The approach I have attempted (see below) works for the first tile I try but fails after that. Can you have a look and tell me where I am going wrong please?

Many thanks in advance

Regards
Ian Carson

XAML
             x:Class="Bambi.Modules.Dashboards.Views.StrategySummaryView"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Bambi.Modules.Dashboards"
             xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
             xmlns:inf="clr-namespace:Bambi.Infrastructure;assembly=Bambi.Infrastructure"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300"
             Name="Strategy">
    <UserControl.Resources>
        <inf:InvertBoolean x:Key="InvertBoolean"/>
        <inf:BooleanToVisibility x:Key="BooleanToVisibility"/>
        <inf:InvertBooleanToVisibility x:Key="InvertBooleanToVisibility"/>
        <DataTemplate x:Key="HeaderTemplate">
            <TextBlock Text="{Binding StrategyName}" FontFamily="Helvetica Neue LT Com" FontSize="14"/>
        </DataTemplate>
        <DataTemplate x:Key="DailyDataTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual" TransitionDuration="0:0:0.5">
                <telerik:RadFluidContentControl.LargeContent>
                    <ContentPresenter Content="{Binding StrategyDetail}"/> <--This is the created view
                </telerik:RadFluidContentControl.LargeContent>
                <telerik:RadFluidContentControl.SmallContent>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150"/>
                            <ColumnDefinition Width="150"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.17*"/>
                            <RowDefinition Height="0.17*"/>
                            <RowDefinition Height="0.17*"/>
                            <RowDefinition Height="0.17*"/>
                            <RowDefinition Height="0.1*"/>
                            <RowDefinition Height="0.13*"/>
                        </Grid.RowDefinitions>
                        <TextBlock FontFamily="Helvetica Neue LT Com" FontSize="32" Foreground="#FFF39200" VerticalAlignment="Bottom" Margin="0,15,0,0" HorizontalAlignment="Right"><Run Language="en-au" Text="{Binding TradeCount }"/></TextBlock>
                        <TextBlock Grid.Column="1" Margin="8,0,32,0" FontFamily="Helvetica Neue LT Com" Foreground="Gray" FontWeight="Bold" Height="20" VerticalAlignment="Bottom" FontSize="12"><Run Language="en-au" Text="TRADES"/></TextBlock>
                        <TextBlock FontFamily="Helvetica Neue LT Com" FontSize="32" VerticalAlignment="Bottom" Foreground="#FFF39200" Margin="0,15,0,0" HorizontalAlignment="Right" Grid.Row="1"><Run Language="en-au" Text="{Binding Return, StringFormat={}{0:P} }"/></TextBlock>
                        <TextBlock Grid.Column="1" Margin="8,0,32,0" TextWrapping="Wrap" FontFamily="Helvetica Neue LT Com" Foreground="Gray" FontWeight="Bold" Height="20" VerticalAlignment="Bottom" FontSize="12" Grid.Row="1"><Run Language="en-au" Text="RETURN"/></TextBlock>
                        <TextBlock FontFamily="Helvetica Neue LT Com" FontSize="32" VerticalAlignment="Bottom" Foreground="#FFF39200" Margin="0,15,0,0" HorizontalAlignment="Right" Grid.Row="2"><Run Language="en-au" Text="{Binding Probability, StringFormat={}{0:P} }"/></TextBlock>
                        <TextBlock Grid.Column="1" Margin="8,0" TextWrapping="Wrap" FontFamily="Helvetica Neue LT Com" Foreground="Gray" FontWeight="Bold" Height="20" VerticalAlignment="Bottom" FontSize="12" Grid.Row="2"><Run Language="en-au" Text="PROBABILITY"/></TextBlock>
                        <TextBlock FontFamily="Helvetica Neue LT Com" FontSize="32" VerticalAlignment="Bottom" Foreground="#FFF39200" Margin="0,15,0,0" HorizontalAlignment="Right" Grid.Row="3"><Run Language="en-au" Text="{Binding WinLossRatio, StringFormat={}{0:P} }"/></TextBlock>
                        <TextBlock Grid.Column="1" Margin="8,0" TextWrapping="Wrap" FontFamily="Helvetica Neue LT Com" Foreground="Gray" FontWeight="Bold" Height="20" VerticalAlignment="Bottom" FontSize="12" Grid.Row="3"><Run Language="en-au" Text="WIN/LOSS"/></TextBlock>
                        <telerik:RadRating IsReadOnly="False" NumberOfItemsToGenerate="10" Grid.ColumnSpan="2" HorizontalAlignment="Center" Grid.Row="4" Value= "{Binding Ranking}" Margin="0,0,5,5" VerticalAlignment="Bottom"/>
                        <telerik:RadButton Visibility="{Binding RetrievePressed, Converter={StaticResource InvertBooleanToVisibility}}" Content="Retrieve Details" Grid.Row="5" Grid.ColumnSpan="2" telerik:StyleManager.Theme="Expression_Dark" VerticalAlignment="Center" Height="24" Width="150" Command="{Binding DataContext.RetrieveStrategyDetailCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadTileView}} }" CommandParameter="{Binding TrackingID}" />
                        <telerik:RadProgressBar
                            telerik:StyleManager.Theme="Expression_Dark"
                            Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Height="6" Width="150"
                            VerticalAlignment="Center" HorizontalAlignment="Center"
                            IsIndeterminate="True"
                            DataContext="{Binding}"
                            Visibility="{Binding VisibleProgressBar, Converter={StaticResource BooleanToVisibility}}"/>
                        <TextBlock
                            Visibility="{Binding DataComplete, Converter={StaticResource BooleanToVisibility}}"
                            Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"
                            TextWrapping="Wrap" FontFamily="Helvetica Neue LT Com" Foreground="Gray" FontWeight="Bold" Height="20"
                            VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12"
                            IsVisibleChanged="TextBlock_IsVisibleChanged">
                            <Run Language="en-au" Text="COMPLETE"/>
                        </TextBlock>
                    </Grid>
                </telerik:RadFluidContentControl.SmallContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>
        <DataTemplate x:Key="HourlyDataTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual" TransitionDuration="0:0:0.5" >
                <telerik:RadFluidContentControl.LargeContent>
                    <Grid Margin="0">
                        <Rectangle Fill="Aqua"  Margin="0"/>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black"  Text="LargeContent" FontSize="24"/>
                    </Grid>
                </telerik:RadFluidContentControl.LargeContent>
                <telerik:RadFluidContentControl.SmallContent>
                    <Grid Margin="0">
                        <Rectangle Fill="BlueViolet"  Margin="0"/>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Yellow"  Text="SmallContent" FontSize="24"/>
                    </Grid>
                </telerik:RadFluidContentControl.SmallContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>
        <DataTemplate x:Key="MinutelyDataTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual" TransitionDuration="0:0:0.5" >
                <telerik:RadFluidContentControl.LargeContent>
                    <Grid Margin="0">
                        <Rectangle Fill="Tomato"  Margin="0"/>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="SteelBlue" Text="LargeContent" FontSize="24"/>
                    </Grid>
                </telerik:RadFluidContentControl.LargeContent>
                <telerik:RadFluidContentControl.SmallContent>
                    <Grid Margin="0">
                        <Rectangle Fill="Silver"  Margin="0"/>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Sienna"  Text="SmallContent" FontSize="24"/>
                    </Grid>
                </telerik:RadFluidContentControl.SmallContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>
        <local:StrategyTemplateSelector x:Key="ContentDataTemplateSelector"
                                       DailyDataTemplate="{StaticResource DailyDataTemplate}"
                                       HourlyDataTemplate="{StaticResource HourlyDataTemplate}"
                                       MinutelyDataTemplate="{StaticResource MinutelyDataTemplate}"/>
    </UserControl.Resources>
    <Grid Background="#FF252929">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="274*" />
        </Grid.RowDefinitions>
        <controls:RadTileView Name="StrategiesTiles"
                             telerik:StyleManager.Theme="Expression_Dark"
                             MinimizedColumnWidth="300"
                             MinimizedRowHeight="300"
                             MaximizeMode="One"
                             PreservePositionWhenMaximized="True"
                             ContentTemplateSelector="{StaticResource ContentDataTemplateSelector}"
                             ItemsSource="{Binding StrategyDetails}"
                             ItemTemplate="{StaticResource HeaderTemplate}"
                             TileStateChanged="RadTileView_TileStateChanged"
                             TileStateChangeTrigger="SingleClick"
                             Loaded="StrategiesTiles_Loaded"
                             Grid.Row="0" Grid.RowSpan="2" DataContext="{Binding}"
                             >
        </controls:RadTileView>
    </Grid>
</UserControl>


Code Behind
/// <summary>
/// Interaction logic for DashboardView.xaml
/// </summary>
public partial class StrategySummaryView
{
    public StrategySummaryView()
    {
        InitializeComponent();
    }
 
    public StrategySummaryView(StrategySummaryViewModel viewModel)
        : this()
    {
        DataContext = viewModel;
    }
 
    private void RadTileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
    {
        var item = e.OriginalSource as RadTileViewItem;
 
        if (item != null)
        {
            var fluid = item.ChildrenOfType<RadFluidContentControl>().FirstOrDefault();
            if (fluid != null)
            {
                switch (item.TileState)
                {
                    case TileViewItemState.Maximized:
                        fluid.State = FluidContentControlState.Large;
                        break;
                    case TileViewItemState.Minimized:
                        fluid.State = FluidContentControlState.Small;
                        break;
                }
            }
        }
    }
 
    private void StrategiesTiles_Loaded(object sender, RoutedEventArgs e)
    {
        foreach (var tile in StrategiesTiles.ChildrenOfType<RadTileViewItem>())
        {
            var fluid = tile.ChildrenOfType<RadFluidContentControl>().FirstOrDefault();
            if (fluid != null)
            {
                switch (tile.TileState)
                {
                    case TileViewItemState.Maximized:
                        fluid.State = FluidContentControlState.Large;
                        break;
                    case TileViewItemState.Minimized:
                        fluid.State = FluidContentControlState.Small;
                        break;
                }
            }
        }
    }
 
    private void TextBlock_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        if ((bool)e.NewValue != true) return;
         
        var textBlock = sender as FrameworkElement;
        if (textBlock == null) return;
 
        var container = textBlock.ParentOfType<RadTileViewItem>();
        if (container == null) return;
 
        container.TileState = TileViewItemState.Maximized;
    }
}


3 Answers, 1 is accepted

Sort by
0
Zarko
Telerik team
answered on 04 Jun 2013, 11:47 AM
Hi Ian,
From what I could see the issue is that when you maximize an item the TextBlock becomes visible and after that when you try to Minimize this item the visibility change event is fired (because the textBlock is included in the VisualTree again) and you maximize it again! You could fix this with something like this in the TileStateChanged event:
case TileViewItemState.Minimized:
    fluid.State = FluidContentControlState.Small;
    var businessItem = this.StrategiesTiles.ItemContainerGenerator.ItemFromContainer(item) as MyItem;
    if (businessItem != null)
        businessItem.DataComplete = false;
    break;
Another approach could be to directly bind the TileState of the items to the DataComplete property using a converter.
I've attached a sample project so could you please examine it and if you have further questions feel free to ask.

Regards,
Zarko
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Ian
Top achievements
Rank 1
answered on 11 Jun 2013, 03:57 PM
Hi Zarko

Thanks for the pointers and your suggested solution.

Your binding idea works well but has one minor problem in that the animation from minimized to maximized does not work correctly once the tile is in a Data Complete state.

The tile view does become maximized when the header is clicked but the transition is not the slide and zoom but just instantaneous change. Do I need to set/Reset something else in the ItemContainerStyle?

 Many thanks for your help

regards
Ian Carson
0
Zarko
Telerik team
answered on 13 Jun 2013, 02:25 PM
Hi Ian,
The RadFluidContent's Transition should work fine out of the box without any resets. Could you please tell us what you're doing differently because I wasn't able to reproduce the issue in my project ?
Note: If you LargeContent is a big, heavy control (like chart or gridView) the UI tread might freeze for a moment(while it's rendering it) and because of this it may look like there's no transition animation.
We're looking forward to hearing from you.

Regards,
Zarko
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
TileView
Asked by
Ian
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Ian
Top achievements
Rank 1
Share this question
or