UWP Binding vs. X:Bind part B

13 בDecember 2017

אין תגובות

x:Bind with methods & events

Back to the start, Xbind allow us to directly binding Events to Functions which is awesome, it just downgrade the Command pattern , Binding of course just can’t . there is no restriction about binding to method, you can bind with arguments, to return value etc. & of course the default EventHandler signature with default parameter or without.

For example:


<VariableSizedWrapGrid>

   <Button Content="click to void method" Click="{x:Bind Foo, Mode=OneWay}"  />

   <Button Content="double method with args" Width="{x:Bind Foo2(100),Mode=OneWay}"/>

   <Button Content="sting method" ToolTipService.ToolTip="{x:Bind Foo3(),Mode=OneWay}" />

   <Button Content="Event pointer enterd method" PointerEntered="{x:Bind Foo4}" />

</VariableSizedWrapGrid>

 private void Foo()

 {

 }

 private double Foo2(int val)

 {

   return val+100;

 }

 private string Foo3()

 {

   return "Hello";

 }

 private void Foo4(object sender, PointerRoutedEventArgs e)

 {

 }

Debugging & validate x:Bind

Validation – xBing use precompile internal validation, so can spare some runtime failures, also might lead to better and efficient code, for example, use Two-Way bindings while one of the endpoints is missing converter will cased to compile time error and can avoid from runtime errors.

Debugging,

for FED developers who working with markup languages, debug the UI level can be hard task to accomplish, for example if the value doesn’t arrived properly to view we use external tools or writing debug components.. xBind just made iteasier, the markup binding generate reading file and we can debug through

xBind & MVVM architecture

Years ago when MVC/MVVM become a popular programmers easy thrilling, we use to separate everything to small units, those small units together orchestrate the application building blocks,

It where start with small views , view-models (no matter if View first or view-model first), services, data-templates also where separate into quarantine areas, styles & templates could even store at different assembly and so on,

Now, its all change a little, but in general all the same.

XBind (if you choose to use it) like to see everything in close distance, like DataTemplates at same file and Xbind properties at the partial *.cs File, to be honest I like it, and you can think of it as an Angular Component if you familiar with,

MVVM View-First: nothing has changed but instead of DataContext we using *ViewModel instance at the Partial *.cs file (codeBehind) and bind our xaml fields to VM.Properties and so on,

MVVM View-First: more problematic, yet you could do it as the following Example:

View xaml file:

<Grid Background="LightBlue">

   <ContentControl Content="{x:Bind VM}" ContentTemplate="{StaticResource itemServieTemplate}"/>

</Grid>

View.cs file:

public sealed partial class MainPage : Page

    {

        public ItemsServiceViewModel VM

        {

            get; set;

        }


        public MainPage()

        {

            VM = new ItemsServiceViewModel();


            this.InitializeComponent();

        }

    }

App.xaml- Datatemplates:

<ResourceDictionary>


      <DataTemplate x:Key="z"  x:DataType="local:ItemViewModel">

                <StackPanel>

                    <TextBlock Text="fds" />

                    <TextBlock Text="{x:Bind Title}"/>

                    <TextBlock Text="{x:Bind ItemCategory}"/>

                </StackPanel>

       </DataTemplate>


      <DataTemplate x:Key="itemServieTemplate" x:DataType="local:ItemsServiceViewModel">

          <Grid Background="LightGreen" BorderBrush="Black" BorderThickness="3">

            <ListBox ItemsSource="{x:Bind Items,Mode=OneWay}" ItemTemplate="{StaticResource z}" />

            <Button  HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Add Item Test" Click="{x:Bind AddItem}"/>

          </Grid>

      </DataTemplate>


</ResourceDictionary>

ViewModels :


  public class ItemViewModel : ViewModelBase

    {

        public ItemViewModel(Item _model)

        {

            Model = _model;

        }


        private Item model;


        public Item Model

        {

            get { return model; }

            set

            {

                model = value;

                Notify();

            }

        }


        public string Title { get { return model.Title; } }

        public Category ItemCategory { get { return model.ItemCategory; } }



public class ItemsServiceViewModel : ViewModelBase

    {

       public ObservableCollection<ItemViewModel> Items

        {

            get; set;

        }


        public void AddItem()

        {

            ItemViewModel newItem = new ItemViewModel(new Item("^^", Category.Food));

            Items.AddItem(newItem.Model);

        }

    }


//Model:


    public enum Category { Food = 1, Music = 2, }


    public class Item

    {

        public Item( string titile , Category cat)

        {

            Title = titile;

            ItemCategory = cat;

        }


        public string Title { get; set; }

        public Category ItemCategory { get; set; }

    }

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *