Samouczek Windows Phone 7 – Counter

Moja kolejna aplikacja zademonstruje prawidłowe użycie wzorca MVVM. Oczywiście korzystamy już z niego od samego początku samouczka budując nasze aplikacje na bazie framework-a nRoute. Aplikacja wzoruje się na wersji iPhone-owej.

Aplikacja posiadała będzie prosty ViewModel składający się z jednej property zliczającej typu int oraz dwóch propert obsługujących zdarzenie „Click” o typie ActionCommand. GUI natomiast składało się będzie  z dwóch przycisków „One Less” i „One More” oraz TextBox-a wyświetlającego zliczaną liczbę.


<Grid x:Name="ContentGrid" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="200"/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Button Content="One Less">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <nBehaviors:ExecuteCommandAction CommandBinding="{Binding OneLess,Mode=OneWay}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
                <Button Content="One More" Grid.Column="1" >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <nBehaviors:ExecuteCommandAction CommandBinding="{Binding OneMore,Mode=OneWay}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </Grid>

            <Grid Background="Transparent">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
                           Style="{StaticResource PhoneTextExtraLargeStyle}"
                           Text="{Binding CurrentCount,Mode=OneWay}"/>
            </Grid>
        </Grid>

Ja widać w powyższym kodzie, przyciski mają obsłużone zdarzenie "Click" za pomocą dostarczonego przez nRoute Behaviour-a ExecuteCommandAction, który jest zbindowany z Propertą udostępnianą przez ViewModel.

[MapViewModel(typeof(MainPage))]
    public class MainPageViewModel : ViewModelBase
    {
        private int _count;

        public MainPageViewModel()
        {
            CurrentCount = 0;

            this.OneMore = new ActionCommand(() => CurrentCount += 1);
            this.OneLess = new ActionCommand(() => CurrentCount -= 1);
        }

        public ActionCommand OneMore { get; private set; }
        public ActionCommand OneLess { get; private set; }

        public int CurrentCount
        {
            get
            {
                return _count;
            }
            private set
            {
                if (_count != value)
                {
                    _count = value;
                    NotifyPropertyChanged(() => CurrentCount);
                }
            }
        }
    }

W konstruktorze inicjalizujemy akcie OneLess oraz OneMore. Dodatkowo, aby były widoczne zmiany property CurrentCount na widoku, w seterze property po zmianie wartości powinniśmy wywołać metodę NotifyPropertyChanged, która spowoduje odświerzenie widoku.

Reklamy

~ - autor: kaprys12 w dniu Sierpień 30, 2010.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

 
%d blogerów lubi to: