How to add image on AutoHide area button ?

3 posts, 0 answers
  1. Ravi
    Ravi avatar
    97 posts
    Member since:
    Jun 2012

    Posted 27 Sep 2012 Link to this post

    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.
  2. George
    Admin
    George avatar
    1332 posts

    Posted 01 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Michael
    Michael avatar
    2 posts
    Member since:
    Mar 2012

    Posted 09 Nov 2012 Link to this post

    <UserControl x:Class="Demo.AppHeader"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 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>

Back to Top