locked
Set xaml element property to a user configurable value

    Question

  • I have an ellipse contained within a DataTemplate which is used through out my app. I want the size (height + width) of this ellipse to be configurable by the user.

    What is the recommended way to achieve this in XAML? Can I have a property in App.xaml which can be changed programmatically through C#?

    The property needs to be dynamic, i.e. once a user changes the ellipse to large in the settings menu and navigates back to the previous page the height and width of the element will be updated.

    Thanks

    Monday, October 27, 2014 5:18 PM

Answers

  • In App.xaml:

        <Application.Resources>
            <x:Double x:Key="EllipseSize">100</x:Double>
        </Application.Resources>
    

    In various pages.xaml:

    <Ellipse Height="{StaticResource EllipseSize}"  Width="{StaticResource EllipseSize}" Fill="{StaticResource EllipseColour}" />
           
    To change the size:
       App.Current.Resources["EllipseSize"] = (double)250;
    
             


    Monday, October 27, 2014 9:26 PM
    Owner

All replies

  • You can bind the ellipses values to a resource in your Application.Resources dictionary and then programmatically set the resource, but that will only affect newly laid out ellipses, not existing ones on the current page. It should take effect if you're doing a full navigation to a previous page, but not when going from a SettingsFlyout back to the still showing main page.

    If you want to affect existing ones you'll need to bind to a custom property which fires change notifications.

    --Rob


    Monday, October 27, 2014 7:15 PM
    Owner
  • What is the recommended way to define a resource in the Application.Dictionary which can be changed programmatically and set the Height and Width elements?

    I've tried using a Style element and programmatically changing the Setters contained within but can't seem to get it to work.

    Monday, October 27, 2014 8:54 PM
  • In App.xaml:

        <Application.Resources>
            <x:Double x:Key="EllipseSize">100</x:Double>
        </Application.Resources>
    

    In various pages.xaml:

    <Ellipse Height="{StaticResource EllipseSize}"  Width="{StaticResource EllipseSize}" Fill="{StaticResource EllipseColour}" />
           
    To change the size:
       App.Current.Resources["EllipseSize"] = (double)250;
    
             


    Monday, October 27, 2014 9:26 PM
    Owner