Dzisiaj obędzie się bez użycia wzorca MVVM. To co chcę pokazać jest „wykonywane” jedynie po stronie widoku.
Nieraz zdarza się, że chcemy aby zachowanie niektórych kontrolek w naszym programie zależało od stanu innej kontrolki. Każdy chyba widział jak podczas instalacji nie możemy przejść do następnego kroku jeśli nie zaakceptujemy regulaminu. W tym przypadku „button” jest niedostępny, dopóki nie zmienimy stanu „checkbox‚a”. Tutaj WPF dostarcza nam mechanizm powiązań.
Tak więc… bardzo prosty przykład:
Tworzymy CheckBox i nadajemy mu nazwę (Name).
<CheckBox Name="v_CheckBox" Content="IsEnabled"/>
Teraz dodajmy przycisk:
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="Click!"/>
Ok… póki co są to niezależne kontrolki.
Spróbujmy powiązać stan checkbox’a ze stanem przycisku, a konkretniej to wartość własności „IsChecked” checkbox’a z wartością własności „IsEnabled” przycisku.
W tym celu dodajemy do przycisku własność:
IsEnabled=
Jako wartość podajemy powiązanie z dwoma parametrami:
{Binding ElementName=v_CheckBox, Path=IsChecked}
ElementName jak nie trudno się domyśleć służy do wskazania na element, z którym chcemy powiązać, a „Path” oznacza z jakim properties.
Oczywiście możemy wiązać, ze sobą nie tylko wartości boolowskie, ale także string.
W zasadzie to powiązać można ze sobą dowolne wartości, jednak wtedy trzeba dopisać Converter. O konwerterach napiszę innym razem 😉
Powiążemy jeszcze jedną właściwość naszego przycisku. Załóżmy, że dajemy użytkownikowi (z jakiejś dziwnej przyczyny) możliwość zmiany tekstu wyświetlanego wewnątrz przycisku.
W tym celu dodajmy do naszego okna jeszcze jedną kontrolkę TexBox i nadajmy mu nazwę oraz jakiś wstępny tekst.
<TextBox Name="v_TextBox" VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="Click!" Height="20" Width="120" Background="LightGray"/>
Teraz wystarczy w naszym przycisku podmienić wcześniejszą wartość Content na powiązanie:
{Binding ElementName=v_TextBox, Path=Text}
Oto cała zawartość głównego kontenera:
<Grid> <CheckBox Name="v_CheckBox" Content="IsEnabled" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding ElementName=v_TextBox, Path=Text}" IsEnabled="{Binding ElementName=v_CheckBox, Path=IsChecked}"/> <Label Content="Button Text:" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,120,0"/> <TextBox Name="v_TextBox" VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="Click!" Height="20" Width="120" Background="LightGray"/> </Grid>
Efekt powinien być taki:
I to chyba wszystko. Jak widać nie trzeba zawsze stosować wzorca MVVM i CanExecute. Czasami jest to strzelanie z armaty do muchy. Dlatego powstały powiązania, aby załatwić sprawę prostych zależności.
Całość jak zawsze dostępna na GitHub! 😉
Be First to Comment