An example of a custom view?

Mar 10, 2012 at 6:12 PM

I'm thinking of using YLOD but I have a boolean setting where, rather than just having a toggle switch, I want the user to pick between two radio buttons so that each button can have text against them to clarify the choice the user is making.

From the documentation, this would seem to require the creation of a view factory and then providing my own view. However, I'm unclear what I would need to do to achieve this. Can you suggest what is required?

Thanks.

Philip

 

Coordinator
Mar 10, 2012 at 6:52 PM

Hi Philip,

yes, you're on the right track. A sample for such a factory can be found here:

http://ylod.codeplex.com/wikipage?title=CustomViews

Instead of simply using the type of the option to provide your own value, you can also access the property values of the option that is passed in; that would enable you to even provide different editors based on the option data.

So, for your situation, something like this would be sufficient:

public class RadioButtonsOptionsViewFactory : IOptionsViewFactory
{
    private readonly DefaultOptionsViewFactory _defaultFactory = new DefaultOptionsViewFactory();

    public FrameworkElement CreateViewFor(Option option)
    {
        FrameworkElement result = null;

        if (option is BooleanOption)
        {
            result = new RadioButtonEditor();
            result.DataContext = option;
        }

        // for each option type we don't support, let the default factory handle it
        return _defaultFactory.CreateViewFor(option);
    }
}

Here, "RadioButtonEditor" is a user control you have created that is able to edit the option value. I somewhat assume that you're following an MVVM approach in the above sample, and set the DataContext of your user control to the option in question (so you can use bindings etc. to manipulate the option in your editor) - of course you are free to use any kind of control and any way of setting up that control that you can imagine.

In the original code (Views/BooleanEditor.xaml, feel free to look at it) this is all that is required to edit the boolean option:

<toolkit:ToggleSwitch HorizontalAlignment="Left"
                        Grid.Column="1"
                        Grid.RowSpan="2"
                        Content=""
                        Header=""
                        IsChecked="{Binding Value, Mode=TwoWay}" />

In your case, you would use RadioButtons instead.

The last step to perform is that you need to set your factory so it's actually used by the framework, like:

OptionsService.Current.OptionsViewFactory = new RadioButtonsOptionsViewFactory();

This is also described in more detail in the documentation link above.

I hope this helps,
-Peter