sobota, 6 marca 2010

Praca z Menu w WPF

Każda nowoczesna aplikacja powinna mieć dobrze zaprojektowane i wygodne w obsłudze menu. W WPF bez trudu zaprojektujemy atrakcyjne menu, które nie tylko ułatwi poruszanie się użytkownikowi po naszej aplikacji, ale sprawi że będzie częściej sięgał po naszą aplikację.

Menu w wygodny sposób można zaprojektować z użyciem XAMLa.  

        <Menu>

        </Menu>

Pomiędzy znaczniki Menu możemy wstawiać kolejne elementy naszego menu:

        <Menu>
            <MenuItem Header="Plik" Name="file"></MenuItem>
            <MenuItem Header="Widok" Name="view"></MenuItem>
            <MenuItem Header="Pomoc" Name="help"></MenuItem>
        </Menu>

Użytkownikowi wyświetli się oczywiście to co zawarliśmy we właściwości Header. Aby dodać zdarzenie dla elementu menu, wystarczy wpisać Click=" a edytor sam zaproponuje stworzenie odpowiedniego EvntHandlera. 

Tworzenie menu wielopoziomowego także nie jest trudne. Wystarczy w konkretnym MenuItem-ie wprowadzić kolejny MenuItem:

        <Menu>
            <MenuItem Header="Plik" Name="file">
                <MenuItem Header="Otwórz" Name="open"></MenuItem>
                <MenuItem Header="Zapisz" Name="save"></MenuItem>
            </MenuItem>
            <MenuItem Header="Widok" Name="view"></MenuItem>
            <MenuItem Header="Pomoc" Name="help"></MenuItem>
        </Menu>

Jeśli chcielibyśmy uzyskać kolejny poziom dodajemy po prostu następny zagnieżdżony znacznik MenuItem. 

Często oprócz opisu tekstowego menu zawierają jeszcze pictogram tekstowego znaczenia. Ułatwia to wyszukiwanie konkretnych opcji w rozbudowanych menach a zarazem jest przyjemne dla oka. Aby dodać pictogram należy skorzystać z właściwości Icon:

        <Menu>
            <MenuItem Header="Plik" Name="file">
                <MenuItem Header="Otwórz" Name="open">
                    <MenuItem.Icon>
                        <Image Source="open.png"></Image>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="Zapisz" Name="save">
                    <MenuItem.Icon>
                        <Image Source="sae.png"></Image>
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>
            <MenuItem Header="Widok" Name="view"></MenuItem>
            <MenuItem Header="Pomoc" Name="help"></MenuItem>
        </Menu>

Brak komentarzy:

Prześlij komentarz