czwartek, 7 czerwca 2012

Moje boje z "Binding" - The Beginning

Po latach pisania w MFC i WinForms nareszcie zacząłem pisać aplikację w WPF i Xaml'u.
Bardzo mi się spodobała właściwość "Content", która pozwala wewnątrz jednego elementu zawrzeć inny element lub grupę elementów.
Podoba mi się możliwość definiowania wyglądu za pomocą języka xaml.
Powoli staję się też wielkim fanem tego co na początku stwarzało mi największe problemy... klasy "Binding".
Umożliwia on połączenie danych bezpośrednio z elementem gui, odpowiadającym za ich prezentację użytkownikowi.
W sposób bardziej zrozumiały pokaże to w kodzie :)
Przyjmijmy, że mamy klasę okna zdefiniowaną w pliku MainWindow.xaml
<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="0,0,0,0" Width="200" />
    </Grid>
</Window>
oraz w pliku MainWindow.xaml.cs
    public partial class MainWindow : Window
    {
        MainWindowViewModel _viewModel = new MainWindowViewModel();
        public MainWindow()
        {
            InitializeComponent();
            //łączymy dane z oknem
            DataContext = _viewModel;
        }
    }
Taka klasa zaprezentuje nam okno z przyciskiem, na którym będzie napisane "Button".
Stwórzmy też klasę, która będzie odpowiadała za dane wyświetlane w oknie - MainWindowViewModel.cs
    public class MainWindowViewModel
    {
        private string _name = string.Empty;
        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }

        public MainWindowViewModel()
        {
            _name = "Radosław Dąbrowicz";
        }
    }
Teraz chciałbym, aby nazwa na przycisku była taka sama, jak właściwość Name z klasy MainWindowViewModel... i właśnie tu spotykamy po raz pierwszy "Binding".
        <Button Content="{Binding Path=Name}" Height="23" HorizontalAlignment="Left" Margin="0,0,0,0" Width="200" />
Jak widać powyżej zmieniła się wartość właściwości "Content".
"Binding" oznacza, że będziemy pobierać wartość z kontekstu danych ("DataContext").
Parametr "Path" opisuje źródło zbindowanej wartości.
W powyższym  wypadku, jeżeli w "DataContext" znajduje się klasa "MainWindowViewModel" a do "Path" przypiszemy tekst "Name" oznacza to, że do parametru "Content" z klasy "Button" "zbindujemy" wartość zapisaną w "Name".
Co da nam w wyniku okno dialogowe z przyciskiem wyświetlającym napis "Radosław Dąbrowicz".
W przypadku kiedy źle napiszemy "bindowanie" to program nie wyrzuci wyjątku, jedynie w oknie "output" będzie napisane co poszło nie tak.

Myślałem, że opisanie samych podstaw zajmie mi najwyżej dwa - trzy zdania, jako że się nie udało dalsze boje z "binding" opiszę później.

Brak komentarzy:

Prześlij komentarz