locked
[U8.1]Change property on UserControl from the MainPage RRS feed

  • Question

  • Hello Everybody !!

    I need to change a property (BackButtonVisibility) to a usercontrol on the mainpage.

    This is my code (UserControl.xaml): 

    <UserControl x:Class="HP_Lounge.UserControls.HeaderUserControl"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="using:HP_Lounge.UserControls"
                 xmlns:converters="using:HP_Lounge.Common.Converters"
                 xmlns:core="using:Microsoft.Xaml.Interactions.Core"
                 xmlns:behaviors="using:HP_Lounge.Common.Behaviors"
                 xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 DataContext="{Binding HeaderUC, Source={StaticResource Locator}}"
                 mc:Ignorable="d"
            >
        <Grid Background="Transparent" >
            <Button x:Name="backButton"
                    Visibility="{Binding BackButtonVisibility,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay}"
                    Command="{Binding BackCommand}"
                    Style="{StaticResource NavigationBackButtonNormalStyle}"
                    AutomationProperties.Name="Back"
                    AutomationProperties.AutomationId="BackButton"
                    AutomationProperties.ItemType="Navigation Button"
                    HorizontalAlignment="Right"
                    Margin="0,0,20,0"
                    VerticalAlignment="Center" />
        </Grid>
    </UserControl>

    My UserControl.xaml.cs code : 

          /// <summary>
            ///     DP definition of the HintTitle property
            /// </summary>
            public static readonly DependencyProperty BackButtonVisibilityProperty = DependencyProperty.Register("BackButtonVisibility",
                                                                                                      typeof(Boolean),
                                                                                                      typeof(HeaderUserControl),
                                                                                          new PropertyMetadata(null));
    
            /// <summary>
            ///     Gets or sets hide back button
            /// </summary>
            public Boolean BackButtonVisibility
            {
                get
                {
                    return (Boolean)GetValue(BackButtonVisibilityProperty);
                }
    
                set
                {
                    SetValue(BackButtonVisibilityProperty,
                             value);
                }
            }

    The code of my MainPage.xaml : 

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="120" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
    
            <!--HEADER-->
            <userControls:HeaderUserControl BackButtonVisibility="{Binding IsBackButtonVisible,Mode=TwoWay}"/>
    
        </Grid>

    I don't know why but the BacButton is still visible.

    Someone may help please?

    Thanks



    Tuesday, June 16, 2015 2:36 PM

Answers

  • >>With your code the BackButton doesn't appear even if i put the IsBackButtonVisible to True.

    Then you know that the binding to your dependency property in the code-behind of the UC works. But the binding to the source property of the view model probably fails. So how did you set the DataContext of the main view?

    Please refer to the following working sample code:

    MainPage.xaml:

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
            <local:HeaderUserControl BackButtonVisibility="{Binding IsBackButtonVisible,Mode=TwoWay}"/>
    
        </Grid>
    </Page>
    


    MainPage.xaml.cs and MainViewModel:

    public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                this.DataContext = new MainViewModel(null);
            }
        }
    
        public class MainViewModel : INotifyPropertyChanged
        {
            private readonly INavigationService _navigationService;
            public MainViewModel(INavigationService navigationService)
            {
                _navigationService = navigationService;
                IsBackButtonVisible = false;
            }
    
            private Boolean _isBackButtonVisible;
            public Boolean IsBackButtonVisible
            {
                get
                {
                    return _isBackButtonVisible;
                }
    
                set
                {
                    Set(ref _isBackButtonVisible,value);
                }
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected virtual bool Set<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
            {
                if (object.Equals(storage, value)) return false;
    
                storage = value;
                this.OnPropertyChanged(propertyName);
    
                return true;
            }
    
            protected void OnPropertyChanged(string propertyName)
            {
                var eventHandler = this.PropertyChanged;
                if (eventHandler != null)
                {
                    eventHandler(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }
    


    HeaderUserControl.xaml:

    <UserControl
        x:Class="App1.HeaderUserControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400" Name="theUc">
    
        <Grid Background="Transparent" >
            <Button x:Name="backButton"
                    Visibility="{Binding BackButtonVisibility,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay, ElementName=theUc}"
                    Content="Button" />
        </Grid>
    
    </UserControl>
    


    HeaderUserControl.xaml.cs:

    public sealed partial class HeaderUserControl : UserControl
        {
            public HeaderUserControl()
            {
                this.InitializeComponent();
            }
    
            public static readonly DependencyProperty BackButtonVisibilityProperty = DependencyProperty.Register("BackButtonVisibility",
                                                                                                      typeof(Boolean),
                                                                                                      typeof(HeaderUserControl),
                                                                                          new PropertyMetadata(null));
            public Boolean BackButtonVisibility
            {
                get
                {
                    return (Boolean)GetValue(BackButtonVisibilityProperty);
                }
    
                set
                {
                    SetValue(BackButtonVisibilityProperty, value);
                }
            }
        }
    


    Converter:

    class BoolToVisibilityConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, string language)
            {
                bool b = (bool)value;
                return b ? Visibility.Visible : Visibility.Collapsed;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, string language)
            {
                throw new NotImplementedException();
            }
        }
    


    It works like a charm.

    Hope that helps. If you for some strange reason still cannot make this work despite I have given you a complete code sample, then please upload a reproducible sample of your issue to OneDrive and post the link to it here for further help. I am afraid no one will be able to guess what you are doing wrong on your side.

    Please also remember to close your threads by marking all helpful posts as answer and then start a new thread if you have a new question.

    • Marked as answer by DiddyRennes Friday, June 19, 2015 8:45 AM
    Wednesday, June 17, 2015 5:25 PM

All replies

  • Set the Source of the Binding to the UC itself:

    <UserControl x:Class="HP_Lounge.UserControls.HeaderUserControl"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="using:HP_Lounge.UserControls"
                 xmlns:converters="using:HP_Lounge.Common.Converters"
                 xmlns:core="using:Microsoft.Xaml.Interactions.Core"
                 xmlns:behaviors="using:HP_Lounge.Common.Behaviors"
                 xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 DataContext="{Binding HeaderUC, Source={StaticResource Locator}}"
                 mc:Ignorable="d" Name="theUc"
            >
        <Grid Background="Transparent" >
            <Button x:Name="backButton"
                    Visibility="{Binding BackButtonVisibility,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay, ElementName=theUc}"
                    Command="{Binding BackCommand}"
                    Style="{StaticResource NavigationBackButtonNormalStyle}"
                    AutomationProperties.Name="Back"
                    AutomationProperties.AutomationId="BackButton"
                    AutomationProperties.ItemType="Navigation Button"
                    HorizontalAlignment="Right"
                    Margin="0,0,20,0"
                    VerticalAlignment="Center" />
        </Grid>
    </UserControl>


    Also make sure that the DataContext of the MainPage contains a Boolean public property named "IsBackButtonVisible".

    Hope that helps.

    Please remember to close your threads by marking all helpful posts as answer and then start a new thread if you have a new question.

    Tuesday, June 16, 2015 2:52 PM
  • Hello Magnus!

    Thank you for your reply.

    With your code the BackButton doesn't appear even if i put the IsBackButtonVisible to True.

    This is my MainViewModel Code :

           /// <summary>
           /// Initialise a new instance
           /// </summary>
           public MainViewModel(INavigationService navigationService)
           {
               _navigationService = navigationService;
               IsBackButtonVisible = true;
               RaisePropertyChanged(() => IsBackButtonVisible);
              
           }
    
           /// <summary>
           /// Gets or Sets Back button visibility 
           /// </summary>
           public Boolean IsBackButtonVisible
           {
               get
               {
                   return _isBackButtonVisible;
               }
    
               set
               {
                   Set(ref _isBackButtonVisible,
                       value);
               }
           }

    May you tell me what's wrong?

    Thank you

    Tuesday, June 16, 2015 3:10 PM
  • >>With your code the BackButton doesn't appear even if i put the IsBackButtonVisible to True.

    Then you know that the binding to your dependency property in the code-behind of the UC works. But the binding to the source property of the view model probably fails. So how did you set the DataContext of the main view?

    Please refer to the following working sample code:

    MainPage.xaml:

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
            <local:HeaderUserControl BackButtonVisibility="{Binding IsBackButtonVisible,Mode=TwoWay}"/>
    
        </Grid>
    </Page>
    


    MainPage.xaml.cs and MainViewModel:

    public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                this.DataContext = new MainViewModel(null);
            }
        }
    
        public class MainViewModel : INotifyPropertyChanged
        {
            private readonly INavigationService _navigationService;
            public MainViewModel(INavigationService navigationService)
            {
                _navigationService = navigationService;
                IsBackButtonVisible = false;
            }
    
            private Boolean _isBackButtonVisible;
            public Boolean IsBackButtonVisible
            {
                get
                {
                    return _isBackButtonVisible;
                }
    
                set
                {
                    Set(ref _isBackButtonVisible,value);
                }
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected virtual bool Set<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
            {
                if (object.Equals(storage, value)) return false;
    
                storage = value;
                this.OnPropertyChanged(propertyName);
    
                return true;
            }
    
            protected void OnPropertyChanged(string propertyName)
            {
                var eventHandler = this.PropertyChanged;
                if (eventHandler != null)
                {
                    eventHandler(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }
    


    HeaderUserControl.xaml:

    <UserControl
        x:Class="App1.HeaderUserControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400" Name="theUc">
    
        <Grid Background="Transparent" >
            <Button x:Name="backButton"
                    Visibility="{Binding BackButtonVisibility,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay, ElementName=theUc}"
                    Content="Button" />
        </Grid>
    
    </UserControl>
    


    HeaderUserControl.xaml.cs:

    public sealed partial class HeaderUserControl : UserControl
        {
            public HeaderUserControl()
            {
                this.InitializeComponent();
            }
    
            public static readonly DependencyProperty BackButtonVisibilityProperty = DependencyProperty.Register("BackButtonVisibility",
                                                                                                      typeof(Boolean),
                                                                                                      typeof(HeaderUserControl),
                                                                                          new PropertyMetadata(null));
            public Boolean BackButtonVisibility
            {
                get
                {
                    return (Boolean)GetValue(BackButtonVisibilityProperty);
                }
    
                set
                {
                    SetValue(BackButtonVisibilityProperty, value);
                }
            }
        }
    


    Converter:

    class BoolToVisibilityConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, string language)
            {
                bool b = (bool)value;
                return b ? Visibility.Visible : Visibility.Collapsed;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, string language)
            {
                throw new NotImplementedException();
            }
        }
    


    It works like a charm.

    Hope that helps. If you for some strange reason still cannot make this work despite I have given you a complete code sample, then please upload a reproducible sample of your issue to OneDrive and post the link to it here for further help. I am afraid no one will be able to guess what you are doing wrong on your side.

    Please also remember to close your threads by marking all helpful posts as answer and then start a new thread if you have a new question.

    • Marked as answer by DiddyRennes Friday, June 19, 2015 8:45 AM
    Wednesday, June 17, 2015 5:25 PM