RadPanorama for WPF?

[Igor]

Hello!

I am interesting if there is RadPanorama for WPF?

[Rossen Hristov]

Hi,

Currently we do not offer this control but we have it in our development plans. We are in the research phase and I cannot be more precise of the time it will be available.

We have added a PITS item for it where you can give your vote for it and affect the priority of Panorama control for WPF/Silverlight.

Greetings,

Ross
the Telerik team

[Igor]

Thank you! I will vote

[Alexander]

Hi, are there any updates for a panorama control for wpf?

[Vladimir Stoyanov]

Hi Alexander,

Currently we do not have plans to implement a Panorama control for wpf. If you describe what exactly you are trying to achieve, though, we might be able to point you to how you can implement it with existing controls.

I am looking forward to hearing from you.

Regards,
Vladimir Stoyanov
Progress Telerik

[Alexander]

Hi Vladimir,

I want to build a starting screen for a application with several input mask, the user should select the mask he wants to work with on the RadPanorama with Metro style. Additionally I want to provide a Login/Logout button in the top right corner and some tiles to share important company announcements. I thought the RadPanorama would be the perfect control for that.

[Vladimir Stoyanov]

Hi Alexander,

Can you please take a look at the RadTransitionControl article in our documentation and see if that control suits your needs. You can also download our WPF Demos and check out the demos with RadTransitionControl. Another control which can help you achieve what you want is the RadTileList. You can read more about it in this article.

I hope you find this helpful. Let me know if I can be of any further assistance.

Regards,
Vladimir Stoyanov
Progress Telerik

[Alexander]

Hi Vladimir,

that looks good but I need the possibility to define rows and columns and add the tiles to the cells of that grid layout like in the RadPanorama. I have taken a look on RadTileList but I think it has he same arrangement behavior like the RadTransitionControl.

Do you have any other tips?

[Kalin]

Hello Alexander,

RadTransitionControl allows you to change its content using a customization animation. In other words you could place whatever you want inside of the control (for example UserControl with the desired layout) and once you want to switch the view (change the content) you will observe nice animation.

So could use the TransitionControl in order to have animations and place inside TileList to achieve the desired look.

Hope this helps.

Regards,
Kalin
Progress Telerik

[Alexander]

Hi Kalin,

thanks for your answer and sorry for my later reply, the topic is actual again now. I have decided to use RadTileList but I have some problems to achieve the behavior I want for the tiles.

1. I would like to have some kind of title at the bottom of the tile (like you can see here on the 'Underwater photography' tile and when the user hovers the mouse over the tile, the title should expand to like half of the tiles height showing a subtitle.

2. And it would be nice when there would be a zoom effect on the content of the tile when the user hovers over the tile.

Do you have any approach or tip to achieve the desired behavior? Maybe the Tile control supports such a behavior out of the box and I just don't know it?

Thank you very much!

[Kalin]

Hello Alexander,

As for the first question - you could check the First Look example from WPF demos application (you can find it here). Regarding the second - there isn't such a built-in functionality and currently we don't have an example demonstrating the same prepared. However if you have any particular questions during the implementation you can let us know.

Regards,
Kalin
Progress Telerik

[Alexander]

Hi Kalin,

thanks for your answer, I have found a solution for my first question, if someone is interested here is the code I have used for it.

<Style x:Key="MainTileStyle" TargetType="{x:Type telerik:Tile}">

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type telerik:Tile}">

                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}">

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="SelectionStates">

                            <VisualState x:Name="Unselected"/>

                            <VisualState x:Name="Selected"/>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal"/>

                            <VisualState x:Name="MouseOver">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="wpSubtitle">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="spTitle">

                                        <SplineThicknessKeyFrame KeyTime="00:00:00" Value="2" />

                                    </ThicknessAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <Grid>

                        <Grid>

                            <ContentPresenter x:Name="oldContentPresenter" Content="" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                            <Border x:Name="SelectedVisual" BorderBrush="#FFFFC92B" BorderThickness="3,4,3,3" Background="Transparent" IsHitTestVisible="False" Opacity="0"/>

                            <Border x:Name="MouseOverVisual" BorderBrush="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:Tile}}, Converter={StaticResource borderBrushConverter}}" Opacity="0.4" BorderThickness="2" Background="Transparent" IsHitTestVisible="False" Margin="0" Visibility="Collapsed"/>

 

                            <Image Source="{DynamicResource Img}" Margin="20"/>

 

                            <StackPanel x:Name="spTitle" Orientation="Vertical" VerticalAlignment="Bottom" Height="Auto">

                                <telerik:RadWrapPanel VerticalAlignment="Top">

                                    <telerik:RadWrapPanel.Background>

                                        <SolidColorBrush Color="Black" Opacity="0.5"/>

                                    </telerik:RadWrapPanel.Background>

                                    <TextBlock Text="{DynamicResource Title}" Foreground="White" FontWeight="Bold" FontSize="14"

                                               Margin="5, 10, 5, 10" VerticalAlignment="Stretch"/>

                                </telerik:RadWrapPanel>

                                <telerik:RadWrapPanel x:Name="wpSubtitle" VerticalAlignment="Bottom" Visibility="Collapsed">

                                    <telerik:RadWrapPanel.Background>

                                        <SolidColorBrush Color="Black" Opacity="0.5"/>

                                    </telerik:RadWrapPanel.Background>

                                    <TextBlock Text="{DynamicResource Subtitle}" Margin="5" TextWrapping="WrapWithOverflow" Foreground="White" FontSize="14"/>

                                </telerik:RadWrapPanel>

                            </StackPanel>

                        </Grid>

                    </Grid>

                </Border>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

    <Setter Property="Background" Value="#FF555555"/>

    <Setter Property="Foreground" Value="White"/>

    <Setter Property="SnapsToDevicePixels" Value="True"/>

    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

    <Setter Property="VerticalContentAlignment" Value="Stretch"/>

    <Setter Property="UseLayoutRounding" Value="True"/>

</Style>

 

For my second question I have created a Trigger on that style

<Style.Triggers>
    <Trigger Property="local:FrameworkElementExt.IsPressed" Value="True">
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="0.95" ScaleY="0.95" />
            </Setter.Value>
        </Setter>
    </Trigger>
</Style.Triggers>

 

But the trigger isn't fired when I place the Tile into a RadTileList control like below

<telerik:RadTileList Grid.Column="1" Grid.Row="1" local:FrameworkElementExt.AttachIsPressed="True"
                     Grid.ColumnSpan="{Binding ElementName=stGridMain, Path=ColumnDefinitions.Count, Converter={StaticResource tileListColumnSpanConverter}}"
                     Grid.RowSpan="{Binding ElementName=stGridMain, Path=RowDefinitions.Count, Converter={StaticResource tileListRowSpanConverter}}">

    <telerik:Tile x:Name="mtWastemanagement" TileType="Quadruple" Background="#0078ac"
                  local:FrameworkElementExt.AttachIsPressed="True" Style="{DynamicResource MainTileStyle}">
        <telerik:Tile.Resources>
            <ImageSource x:Key="Img">pack://application:,,,/Resources/trash.png</ImageSource>
            <system:String x:Key="Title">Abfallamanagement</system:String>
            <system:String x:Key="Subtitle">Geben Sie Abfall für Linien ein oder überprüfen Sie bereits erstellte Eingaben</system:String>
        </telerik:Tile.Resources>
    </telerik:Tile>
</telerik:RadTileList>

 

When I place it outside the RadTileList, for example in a simple Grid it works without problems, what could be the problem here?

[Sia]

Hello,

You are right that when positioned in TileList, the style trigger does not apply. That is why I would recommend using a control template trigger instead as in the shown project.

Regards,
Sia
Progress Telerik

[Alexander]

thanks for your answer, it works grat when the mouse is over. But I need to trigger it when the user presses the left mouse button on the tile. For that I have used a framework element extension.

public class FrameworkElementExt
    {
        public static readonly DependencyProperty IsPressedProperty = DependencyProperty.RegisterAttached("IsPressed", typeof(bool),
                                                                        typeof(FrameworkElementExt), new PropertyMetadata(false));

        public static readonly DependencyProperty AttachIsPressedProperty = DependencyProperty.RegisterAttached("AttachIsPressed", typeof(bool),
                                                                            typeof(FrameworkElementExt), new PropertyMetadata(false, PropertyChangedCallback));

        public static void PropertyChangedCallback(DependencyObject depObj, DependencyPropertyChangedEventArgs args)
        {
            FrameworkElement element = (FrameworkElement)depObj;
            if (element != null)
            {
                if ((bool)args.NewValue)
                {
                    element.MouseDown += new MouseButtonEventHandler(element_MouseDown);
                    element.MouseUp += new MouseButtonEventHandler(element_MouseUp);
                    element.MouseLeave += new MouseEventHandler(element_MouseLeave);
                }
                else
                {
                    element.MouseDown -= new MouseButtonEventHandler(element_MouseDown);
                    element.MouseUp -= new MouseButtonEventHandler(element_MouseUp);
                    element.MouseLeave -= new MouseEventHandler(element_MouseLeave);
                }
            }
        }

        static void element_MouseLeave(object sender, MouseEventArgs e)
        {
            FrameworkElement element = (FrameworkElement)sender;
            if (element != null)
            {
                element.SetValue(IsPressedProperty, false);
            }
        }

        static void element_MouseUp(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement element = (FrameworkElement)sender;
            if (element != null)
            {
                element.SetValue(IsPressedProperty, false);
            }
        }

        static void element_MouseDown(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement element = (FrameworkElement)sender;
            if (element != null)
            {
                element.SetValue(IsPressedProperty, true);
            }
        }

        public static bool GetIsPressed(UIElement element)
        {
            return (bool)element.GetValue(IsPressedProperty);
        }

        public static void SetIsPressed(UIElement element, bool val)
        {
            element.SetValue(IsPressedProperty, val);
        }

        public static bool GetAttachIsPressed(UIElement element)
        {
            return (bool)element.GetValue(AttachIsPressedProperty);
        }

        public static void SetAttachIsPressed(UIElement element, bool val)
        {
            element.SetValue(AttachIsPressedProperty, val);
        }
    }

 

This isn't working, do you have any tips for me?

[Sia]

Hello,

Thank you for the shared code. I have tested it on my end and it works as expected. Please check the attached video and the updated project.

Regards,
Sia
Progress Telerik

[Alexander]

Thank you very much, it works perfectly!