[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2358
  • Last Modified:

How do you add visibility properties to usercontrol in WPF

I have a user control that I have added a  grid to that acts as a badge to display a number.  See below:
UserControl
I want to add a property that gives me the ability to set the visibility of the grid that contains the circle.  I have tried looking at dependency properties, but nothing seems to work.  I want to add a property so that in xaml I can add something like 'badgeVisibility="Hidden"'   Or 'badgeVisibility="Visible"'

Here is the code for my usercontrol:

<UserControl x:Class="colorCompButton"
             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" 
             mc:Ignorable="d" Height="179" Width="317">
    <UserControl.Resources>
        
    </UserControl.Resources>
 
    <Grid>
        <Rectangle x:Name="rect"  Fill="Coral" HorizontalAlignment="Left" Height="147"  VerticalAlignment="Top" Width="286" x:FieldModifier="public"/>
        <Image x:Name="image" Height="110" Margin="10,10,10,0" VerticalAlignment="Top" x:FieldModifier="public"/>
 
 
        <TextBlock x:Name="textBlock" Margin="0,111,10,2" Text="TEST" Background="Transparent" Foreground="White" FontSize="20" Padding="3"/>
        <Grid Margin="237,97,0,0" x:Name="countBadge" Height="88" VerticalAlignment="Top" HorizontalAlignment="Left" Width="94">
            <Border BorderBrush="Maroon" BorderThickness="1" CornerRadius="120" Background="#FF4B1076" HorizontalAlignment="Left" Height="76"  VerticalAlignment="Top" Width="76"></Border>
            <Border BorderBrush="black" Margin="2,2,0,0" BorderThickness="3" Opacity=".5" CornerRadius="120"  HorizontalAlignment="Left" Height="74"  VerticalAlignment="Top" Width="74"></Border>
            <Border BorderBrush="White" BorderThickness="3" CornerRadius="120"  HorizontalAlignment="Left" Height="78" VerticalAlignment="Top" Width="78">
                <Label x:Name="resCount" Content="46" FontSize="25"  Foreground="White"  HorizontalContentAlignment="center" VerticalContentAlignment="center"/>
            </Border>
        </Grid>
    </Grid>
</UserControl>

Open in new window


Thanks for any help you can give me on this.
0
G Scott
Asked:
G Scott
  • 2
  • 2
1 Solution
 
Bob LearnedCommented:
You would need to add a dependency property, as described here:

A SIMPLE PATTERN FOR CREATING RE-USEABLE USERCONTROLS IN WPF / SILVERLIGHT
http://www.scottlogic.com/blog/2012/02/06/a-simple-pattern-for-creating-re-useable-usercontrols-in-wpf-silverlight.html

public partial class FieldUserControl : UserControl
{
  #region Label DP

  /// <summary>
  /// Gets or sets the Label which is displayed next to the field
  /// </summary>
  public String Label
  {
    get { return (String)GetValue(LabelProperty); }
    set { SetValue(LabelProperty, value); }
  }

  /// <summary>
  /// Identified the Label dependency property
  /// </summary>
  public static readonly DependencyProperty LabelProperty =
      DependencyProperty.Register("Label", typeof(string),
        typeof(FieldUserControl), new PropertyMetadata(""));

  #endregion

  public FieldUserControl()
  {
    InitializeComponent();
  }
}

Open in new window

0
 
Bob LearnedCommented:
VB.NET:

Public Partial Class FieldUserControl
	Inherits UserControl
	#Region "Label DP"

	''' <summary>
	''' Gets or sets the Label which is displayed next to the field
	''' </summary>
	Public Property Label() As [String]
		Get
			Return DirectCast(GetValue(LabelProperty), [String])
		End Get
		Set
			SetValue(LabelProperty, value)
		End Set
	End Property

	''' <summary>
	''' Identified the Label dependency property
	''' </summary>
	Public Shared ReadOnly LabelProperty As DependencyProperty = DependencyProperty.Register("Label", GetType(String), GetType(FieldUserControl), New PropertyMetadata(""))

	#End Region

	Public Sub New()
		InitializeComponent()
	End Sub
End Class

Open in new window

0
 
ambienceCommented:
This should do

	public partial class MyControl : UserControl
	{
		public MyControl()
		{
			InitializeComponent();
		}

		public static readonly DependencyProperty BadgeVisibileProperty =
			DependencyProperty.Register("BadgeVisibile", typeof(Visibility), typeof(MyControl), new PropertyMetadata(Visibility.Visible));

		public Visibility BadgeVisibile
		{
			get { return (Visibility)GetValue(BadgeVisibileProperty); }
			set { SetValue(BadgeVisibileProperty, value); }
		}
	}

Open in new window


and the XAML

<UserControl x:Class="Learning.Desktop.MyControl"
             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:Local="clr-namespace:MySampleApp.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
	<Grid>
		<Button Content="Button" VerticalAlignment="Top" 
				Visibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Path=BadgeVisibile}"/>
	</Grid>
</UserControl>

Open in new window


The important piece here is the Binding of Visibility to the BadgeVisible property on the UserControl and not the DataContext, and therefore the use of RelativeSource. In simple words it means, find the parent of type "UserControl" and bind to its "BadgeVisibile" property. NOTE: you can also use a more strict type here like say

{x:Type Local:MyUserControl}

(you'll have to add the xmlns alias Local)
0
 
G ScottAuthor Commented:
Thanks, ambience.  It was not working until I read the part about adding the Local alias.
0
 
ambienceCommented:
The posted code and XAML, as is, works for me. It shouldn't need a more specific type to find the parent UserControl
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now