How to add image on AutoHide area button ?

[Ravi]

Hi,
I want to add a image in auto hide area, for your understand i have attached a image please check once.
I want to add that image in Style(instead of adding in window) so that it will be available in all projects.

Regards,
Srinvias.

[George]

Hello Srinivas,

Please, refer to the following online article how to add image to the RadPane - http://www.telerik.com/help/wpf/raddocking-how-to-add-icon-pane-header.html. Please, note that this image will be visible either the pane is pinned or not, but you could bind the image visibility to the RadPane.IsPinned property so when the pane is pinned, the image will be collapsed.

Hope this helps.

Kind regards,
George
the Telerik team

[Michael]

<UserControl x:Class="Demo.AppHeader"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ccControls="clr-namespace:Demo.Controls;"
             mc:Ignorable="d">
    <UserControl.Resources>
        <ccControls:PositiveNumberVisibleConverter x:Key="convPostiveToVisible"/>
    </UserControl.Resources>
    <Grid>
       <StackPanel Orientation="Horizontal" MinWidth="90" Margin="0,0,15,0">
            <Image Height="{Binding ImageHeight}" Margin="3" Source="{Binding ImageSource}" />
            <TextBlock Text="{Binding Text}" Margin="5,0" VerticalAlignment="Center" FontSize="{Binding FontSize}" FontWeight="Bold" />
       </StackPanel>
        <StackPanel  Visibility="{Binding AlertCount, Converter={StaticResource convPostiveToVisible}}" Opacity="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,2,2,0">
            <Border MinWidth="13" Height="15" CornerRadius="5" BorderBrush="#E23923" Background="#F03D25">
                <TextBlock TextAlignment="Center" Margin="2,0" VerticalAlignment="Center" Text="{Binding AlertCount}" Foreground="White" FontWeight="Bold"/>
            </Border>
        </StackPanel>
    </Grid>
</UserControl>

public partial class AppHeader : UserControl
    {
        public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(AppHeader), null);
        public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(AppHeader), null);
        public static readonly DependencyProperty FontSizeProperty = DependencyProperty.Register("FontSize", typeof(double), typeof(AppHeader), null);
        public static readonly DependencyProperty ImageHeightProperty = DependencyProperty.Register("ImageHeight", typeof(double), typeof(AppHeader), null);
        public static readonly DependencyProperty AlertCountProperty = DependencyProperty.Register("AlertCount", typeof(int), typeof(AppHeader), null);

        public AppHeader()
        {
            InitializeComponent();

            this.DataContext = this;
            this.FontSize = 12;
            this.ImageHeight = 16;
            this.AlertCount = 0;
        }

        public string Text
        {
            get
            {
                return (string)GetValue(TextProperty);
            }
            set
            {
                SetValue(TextProperty, value);
            }
        }

        public ImageSource ImageSource
        {
            get
            {
                return (ImageSource)GetValue(ImageSourceProperty);
            }
            set
            {
                SetValue(ImageSourceProperty, value);
            }
        }

        public double FontSize
        {
            get
            {
                return (double)GetValue(FontSizeProperty);
            }
            set
            {
                SetValue(FontSizeProperty, value);
            }
        }

        public double ImageHeight
        {
            get
            {
                return (double)GetValue(ImageHeightProperty);
            }
            set
            {
                SetValue(ImageHeightProperty, value);
            }
        }

        public int AlertCount
        {
            get
            {
                return (int)GetValue(AlertCountProperty);
            }
            set
            {
                SetValue(AlertCountProperty, value);
            }
        }

        public override string ToString()
        {
            return this.Text;
        }
    }

public class PositiveNumberVisibleConverter : IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is int)
            {
                if ((int)value > 0)
                    return System.Windows.Visibility.Visible;
            }

            return System.Windows.Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }

        #endregion
    }

How to use:

<telerik:RadPane x:Name="rpHistory"  IsSelected="False" ContextMenuTemplate="{x:Null}" CanUserPin="False" IsPinned="False" CanDockInDocumentHost="False"  CanFloat="False" CanUserClose="False" >
                                <!-- Your controls here -->
                                <telerik:RadPane.Header>
                                    <maestro:AppHeader Text="History" ImageSource="/Demo;component/Images/history.png" />
                                </telerik:RadPane.Header>
                            </local:RadPane>