WPF és una plataforma de desenvolupament d'aplicacions de Windows que proporciona una àmplia gamma de controls per crear interfícies d'usuari interactives i atractives.
Els controls són elements visuals que permeten als usuaris interactuar amb l'aplicació.
Aquests controls permeten als usuaris ingressar informació. Aquí tens alguns exemples:
Aquests controls s'utilitzen per organitzar i presentar informació. Aquí tens alguns exemples:
Per utilitzar un control a WPF, es pot afegir al XAML (llenguatge de marcat de WPF) o es pot crear dinàmicament des del codi C#. Això proporciona una gran flexibilitat en el disseny i la funcionalitat de la interfície d'usuari.
En el XAML, pots afegir controls utilitzant les etiquetes corresponents i establir les seves propietats com ara el contingut, el color, les dimensions, etc.
Des de C#, pots crear i gestionar controls dinàmicament mitjançant el codi.
Això és útil quan vols afegir o modificar controls en temps d'execució, segons les necessitats de l'aplicació.
A continuació, es mostra un exemple de com crear un botó en XAML:
<Button Content="Clica-me" Click="Button_Click" />
En l'exemple anterior, s'està creant un botó amb el text "Clica-me". L'atribut `Click` indica el gestor d'esdeveniments que s'executarà
quan el botó sigui clicat.
En aquest cas, el gestor d'esdeveniments és `Button_Click, el gestor d'esdeveniments serà una funció o mètode que hauràs de definir al codi C#.
Aquesta funció s'executarà quan l'usuari faci clic al botó Aquesta explicació és només un inici.
A mesura que et familiaritzis amb WPF, aprendràs a utilitzar una gran varietat de controls i a gestionar-ne les propietats i els esdeveniments
segons les necessitats de la teva aplicació.
El control Label és un contenidor de contingut, l'utilitzarem per escriure text per mostra a les nostres interficies.
Perque aquest controls puguin agafar el focus asossiarem un Mnemonic Keys i quan l'usuari polsa la tecla Alt es mostrara subratllat.
Exemple Mnemonic Keys:
<Label Target="{Binding ElementName=Textbox1}"/>_TestMnemonic</Label>
<TextBox Name="Textbox1"/>
Target="{Binding ElementName=Textbox1}“ és la propietat que ens permet vincular el control label1 amb el control Textbox1.
A continuació, es mostra un exemple de com crear un CheckBox content en XAML:
<CheckBox Name ="MyChkBox" Content="Aceptar política de privacitat"/>
En l'exemple anterior, s'està creant un CheckBox qu habilita a l'usuari a determinar si una opció està activa o inactiva.
Deriva de ButtonBase és a dir implementa l'event click com en els controls button i es desencadena quam fem click a la casella.
La seva propietat IsChecked te 3 estats : Indeterminate, checked i Unchecked.
Event click es desencadena quan fem un click en la casella.
Event checked es desencadena quan fem click per marcar la casella.
Els radios butto Els radios buttons tenen la funció de poder donar vàries opcions a l'usuari per seleccionar-ne una i descarten la resta automàticament, es poden agrupar amb la propietat GroupName o també amb un StackPanel.
Exemple amb GroupName
<RadioButton GroupName="Group1" Name="Radiobutton1"/>
<RadioButton GroupName="Group1" Name="Radiobutton2"/>
<RadioButton GroupName="Group1" Name="Radiobutton3"/>
Exemple amb StackPanel
<StackPanel Height="29" VerticalAlignment="Top">
<RadioButton Name="Radiobutton1"/>
<RadioButton Name="Radiobutton2"/>
<RadioButton Name="Radiobutton3"/>
</StackPanel>
Podem agrupar els controls radiobutton mitjançant la propietat GroupName o una altra forma és utilitzar un contenidor, com per exemple un StackPanel.
També tenim controls que no són del tipus Content, dels quals veurem un exemple a continuació
El fem servir per donar feedback visual en tasques que necesiten sonsumir cert temps.
<ProgreesBar IsIndeterminate = "True" width="100" Height="5" />
Per mostrar un progrés genèric establim a True la Propietat IsIndeterminate.
Les propietats Maximu i Minium estableixen els valors del progrés de la barra i la propietat Value sera el valor a mostrar en aquesta barra de progrés
Permet a l'usuari seleccionar un valor clicant sobre la posició del control o desplaçant un indicador gràfic
<Slider Minium="0" Maximum="100" />
Les propietats Maximum i Minium estableixen els valors de l'slider.
LargeChange SmallChange estableixen els valors màxim i mínim de desplaçament quan fem un canvi llarg o curt.
Value serà el valor mostrat en l'slider i estarà entre Minimum i Maximum i si volem detectar els canvis sobre el Slider tenim l'event ValueChanged.
Per poder navegar entre controls amb la tecla Tab farem servir la propietat TabIndex, WPF segueix el sentit dels valors TabIndex de menor a major, començant per 0.
Amb la Propietat KeyboardNavigation.IsTabStop, només podrem navegar amb la tecla Tab en aquells controls que tinguin establerta la propietat
IsTabStop = True ( per defecte ),
per tant si l'establim a False ens assegurem que l'usuari no passarà per aquell control.
Item controls són controls basats en una llista d'elements items.
Permet a l'usuari poder selecionar un únic element entre una llista d'elements.
<ListBox Name="ListDemo">
<ListBoxitem>This</ListBoxitem>
<ListBoxitem>Is</ListBoxitem>
<ListBoxitem>A</ListBoxitem>
<ListBoxitem>List</ListBoxitem>
</ListBox>
Selecteditem retornarà l'element seleccionat i SelectedIndex l'índex seleccionat de la llista d'elements.
Per poder establir quants elements pot seleccionar l'usuari farem servir la propietat SelectionMode amb unes de les opcions:
Singles: Un únic element. Valor per defecte.
Multiple. Varis elements, clicant-los.
Extended. Varis elements consecutius amb la tecla Shift, o varis elements no consecutius amb la tecla Ctrl.
Control per visualitzar una llista d'elemts, representa un drop-down list o llista desplegable.
<ComboBox SelectedIndex="0">
<ComboBoxtem>Item 1</ComboBoxitem>
<ComboBoxtem>Item 2</ComboBoxitem>
<ComboBoxtem>Item 3</ComboBoxitem>
<ComboBoxtem>Item 4</ComboBoxitem>
</ComboBox>
Un altre diferencia amb un ListBox és que el text mostrat pot ser editat per l'usuari.
Perquè el control sigui editable hem d'establir les propietats IsReadOnly = False i IsEditable = True.
Control per visualitzar una llista d'elemts,però amb una estructura d'arbre.
<TreeView Height="200">
<TreeView Header="Boy's names">
<TreeViewitem Header="Jack"></TreeViewitem>
<TreeViewitem Header="Jim"></TreeViewitem>
<TreeViewitem Header="Mark"></TreeViewitem>
<TreeViewitem Header="Ray"></TreeViewitem>
</TreeView>
<TreeView Header="Girl's names">
<TreeViewitem Header="Betty"></TreeViewitem>
<TreeViewitem Header="Libby"></TreeViewitem>
<TreeViewitem Header="Janet"></TreeViewitem>
<TreeViewitem Header="Sandra"></TreeViewitem>
</TreeView>
</TreeView>
El seu funcionament es simlar a un ListBox pero els seus elements son del tipus TreeViewItem.
El seu elemnts es podran expandir o col·lapsar i l'element seleccionat l'obtindrem amb la propietat SelectedItem.
Aquests són algun dels controls que troben dintre de WPF amb els quals podrem crear interfícies gràfiques amb els quals els usuaris podran interaccionar amb ells.
El Data Binding és una característica poderosa de WPF que permet establir una connexió entre les dades i els controls de la interfície d'usuari. Això significa que pots actualitzar automàticament els controls quan les dades canvien, i viceversa.
Un exemple comú és l'ús de Data Binding amb un TextBox. Pots enllaçar el contingut del TextBox a una propietat d'una classe. Quan la propietat canvia, el TextBox s'actualitza automàticament.
<TextBox Text="{Binding Nom, Mode=TwoWay}" />
En aquest exemple, estem enllaçant el Text del TextBox a una propietat anomenada "Nom". L'opció "Mode=TwoWay" significa que els canvis en el TextBox actualitzaran la propietat, i viceversa.
També pots utilitzar Data Binding amb controls com el ListBox per mostrar una llista d'elements.
<ListBox ItemsSource="{Binding LlistaItems}" DisplayMemberPath="Nom" />
En aquest cas, estem enllaçant la propietat ItemsSource del ListBox a una llista d'elements anomenada "LlistaItems". A més, indiquem que volem mostrar la propietat "Nom" de cada element.
A través del Data Binding, pots crear aplicacions més dinàmiques i reactives, ja que els controls es poden actualitzar automàticament a mesura que les dades canvien en el teu programa.
El control DatePicker proporciona una manera senzilla i visual perquè els usuaris seleccionin una data.
<DatePicker Name="DataSeleccionada" />
En l'exemple anterior, s'està creant un DatePicker que permet als usuaris seleccionar una data. La data seleccionada es pot accedir des del codi C#.
El control TabControl permet als usuaris organitzar el contingut en diverses pestanyes, facilitant la navegació entre diferents conjunts d'informació.
<TabControl Name="ControlPestanyes">
<TabItem Header="Pestanya 1">
<!-- Contingut de la pestanya 1 -->
</TabItem>
<TabItem Header="Pestanya 2">
<!-- Contingut de la pestanya 2 -->
</TabItem>
</TabControl>
En l'exemple anterior, s'està creant un TabControl amb dues pestanyes. Cada pestanya té un encapçalament (Header) que es mostra a la part superior de la pestanya. El contingut de cada pestanya es pot afegir dins del corresponent TabItem.