Set Visibility true or false for 2 elements using dependency property

Question

I have usercontrol like this :

it is header user control, i am using this control to few pages,

 <Grid>
            <TextBlock Grid.Column="1" Style="{StaticResource PuzzleTalkHeader}"  Text="{Binding Path=LocalizedResources.GlobalApplicationTitle, Source={StaticResource LocalizedStrings}}" Grid.ColumnSpan="2"/>
            <Image x:Name="imgCoin" Grid.Column="3" Height="24" Width="24" Source="/Assets/Images/Coin.png" />
            <TextBlock x:Name="tbxEarnPoints" Grid.Column="5" Text="15000"/>
        </Grid>

i want to set the one property like this : isVisibleEarnPoints="True"

<UserControls:Header Grid.Row="0" isVisibleEarnPoints="True"/>

if isVisibleEarnPoints="True" then i want the imgCoin and tbxEarnPoints should be visiable and if it is false, then those element hide

i am trying something like this, but i am not able get result, can you help me?

    public partial class Header : UserControl
    {
        public Header()
        {
            InitializeComponent();

        }

        //public bool isVisiableEarnPoints
        //{
        //  set
        //  {
        //      if(value)
        //      {
        //          imgCoin.Visibility = Visibility.Visible;
        //          tbxEarnPoints.Visibility = Visibility.Visible;
        //      }
        //      else
        //      {
        //          imgCoin.Visibility = Visibility.Collapsed;
        //          tbxEarnPoints.Visibility = Visibility.Collapsed;
        //      }
        //  }
        //}

        public int isVisiableEarnPoints { get; set; }

        public static readonly DependencyProperty DisplayTypeProperty = DependencyProperty.Register("isVisiableEarnPoints", typeof(isVisiableEarnPoints), typeof(Header), new PropertyMetadata(YourDPCallBack));

        private static void YourDPCallBack(DependencyObject instance, DependencyPropertyChangedEventArgs args)
        {
            Header control = (Header)instance;

        }
    }
}

Updated Question as per comments :

[1] :

public partial class Header : UserControl
    {
        public Header()
        {
            InitializeComponent();

        }

        private bool _isisVisiableEarnPoints;
        public bool isVisiableEarnPoints
        {
            get{

                return _isisVisiableEarnPoints;
            }
            set
            {
                _isisVisiableEarnPoints=value;
            }
        }
    }

and then bind this property like this :

<Image x:Name="imgCoin" Grid.Column="3" Height="24" Width="24" Source="/Assets/Images/Coin.png" Visibility="{Binding isVisiableEarnPoints, Converter={StaticResource VisibilityConverter}}"  />
        <TextBlock x:Name="tbxEarnPoints" Grid.Column="5" Text="15000" Visibility="{Binding isVisiableEarnPoints, Converter={StaticResource VisibilityConverter}}" />

and used in usercontrol like this :

<UserControls:Header Grid.Row="0" isVisiableEarnPoints="False"/>

but still it is not working!

Answer 1

For that purpose int XAML of the controls that you are going to hide/show bind a that bool property you change and assign also Converter to every one of them, in order to convert boolean value received into appropriate Visibility property of the control.

here is actually concrete example of implementing custom converter:

Using a value converter to bind to Visibility in the Silverlight data grid (it's a Silverlight, but the concept is the same)

Or simply may use BooleanToVisibilityConverter provided by framework if its behavior satisfies your requirements.