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

4 posts, 0 answers
  1. Ian
    Ian avatar
    61 posts
    Member since:
    Jul 2010

    Posted 30 May 2013 Link to this post

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


  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 04 Jun 2013 Link to this post

    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.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Ian
    Ian avatar
    61 posts
    Member since:
    Jul 2010

    Posted 11 Jun 2013 Link to this post

    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
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 13 Jun 2013 Link to this post

    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.

Back to Top