WM8.1: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) |
Admin (Diskussion | Beiträge) K (→Binding) |
||
(13 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 69: | Zeile 69: | ||
= Model = | = Model = | ||
== App.xaml.cs == | |||
<source lang="csharp"> | |||
protected async override void OnLaunched(LaunchActivatedEventArgs e) | |||
{ | |||
// | |||
// Instantiate DAOs | |||
// | |||
ITechLogDao tlDao = new TechLogDummyDao(); | |||
App.Current.Resources["techLogDao"] = tlDao; | |||
... | |||
} | |||
</source> | |||
== Binding == | == Binding == | ||
In der Model-Klasse | In der Model-Klasse (*.cs) | ||
<source lang="csharp"> | <source lang="csharp" enclose="div"> | ||
public class MyClass : | public class MyClass : INotifyPropertyChanged | ||
{ | { | ||
public event PropertyChangedEventHandler PropertyChanged; | public event PropertyChangedEventHandler PropertyChanged; | ||
Zeile 94: | Zeile 108: | ||
} | } | ||
... | ... | ||
public void SetDemoData() | |||
{ | |||
this.MyMethode= "Ein Text"; | |||
} | |||
} | } | ||
</source> | </source> | ||
In der Controller Klasse | In der Controller Klasse (*.xaml.cs) | ||
<source lang="csharp"> | <source lang="csharp" enclose="div"> | ||
MyClass m_Instance = new MyClass(); | |||
public ControlleClass() | |||
{ | |||
this.InitializeComponent(); | |||
SetBindings(); | |||
... | |||
} | |||
private void SetBindings() | |||
{ | |||
TextBox[] textBoxes = { viewElementName }; | |||
string[] properties = { "MyMethode" }; | |||
for (int i = 0; i < textBoxes.Count(); i++) | |||
{ | |||
Bind(m_Instance, textBoxes[i], properties[i], TextBox.TextProperty); | |||
} | |||
} | |||
// sinnvoll in einer Utility-Klasse | |||
public static void Bind(Object context, Control control, string path, DependencyProperty prop) | |||
{ | |||
control.DataContext = context; | |||
Binding binding = new Binding() { Path = new PropertyPath(path) }; | |||
binding.Mode = BindingMode.TwoWay; | |||
control.SetBinding(prop, binding); | |||
} | |||
</source> | </source> | ||
In der View | In der View (*.xaml) | ||
<source lang="xml"> | <source lang="xml"> | ||
... | |||
<TextBox x:Name="viewElementName" ... /> | |||
... | |||
</source> | |||
weiter Variante | |||
<source lang="xml" enclose="div"> | |||
<Page.Resources> | <Page.Resources> | ||
<!-- Collection of items displayed by this page --> | <!-- Collection of items displayed by this page --> | ||
Zeile 110: | Zeile 164: | ||
... | ... | ||
</Page.Resources> | </Page.Resources> | ||
</source> | |||
= Styles = | |||
== App.xaml == | |||
Hier wird auf die Ressource mit den Styles verwiesen. Im Verzeichnis Styles gibt es die Datei Styles.xaml. | |||
<source lang="xml"> | |||
<Application ...> | |||
<Application.Resources> | |||
<ResourceDictionary> | |||
<ResourceDictionary.MergedDictionaries> | |||
<ResourceDictionary Source="Styles/Styles.xaml"/> | |||
</ResourceDictionary.MergedDictionaries> | |||
</ResourceDictionary> | |||
</Application.Resources> | |||
</Application> | |||
</source> | |||
== Styles.xaml == | |||
<source lang="xml" enclose="div"> | |||
<ResourceDictionary | |||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | |||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> | |||
<!-- Vererbung: Ableitung von weiteren Styles --> | |||
<ResourceDictionary.MergedDictionaries> | |||
<!--<ResourceDictionary Source="/Common/StandardStyles.xaml" />--> | |||
</ResourceDictionary.MergedDictionaries> | |||
<!-- Definition eines Wertes --> | |||
<SolidColorBrush x:Key="AppBackgroundColor" Color="#FFB48217"/> | |||
<!-- Verebung: Erweiterung eines bestehenden Styles --> | |||
<Style x:Key="BigTextBox" TargetType="TextBox"> | |||
<Setter Property="FontSize" Value="30"/> | |||
<Setter Property="Margin" Value="10,0,10,0"/> | |||
<Setter Property="HorizontalAlignment" Value="Left"/> | |||
<Setter Property="VerticalAlignment" Value="Center"/> | |||
</Style> | |||
<!-- Verebung: Erweiterung des vorherigen Styles --> | |||
<Style x:Key="BigTextNumberBox" TargetType="TextBox" BasedOn="{StaticResource BigTextBox}"> | |||
<Setter Property="InputScope" Value="Number"/> | |||
</Style> | |||
</ResourceDictionary> | |||
</source> | |||
== In der Anwendung == | |||
Nun kann man die Styles mit den in Styles.xaml definierten Keys verwenden, z.B. könnte es wie folgt aussehen: | |||
<source lang="xml"> | |||
... | |||
<Grid Background="{StaticResource AppBackgroundColor}"> | |||
... | |||
</source> | </source> |
Aktuelle Version vom 24. Mai 2015, 22:35 Uhr
XAML
Die XAML-Datei beschreibt die Oberfläche(n) der Anwendung, z.B. MyView.xaml. Dazu gehört eine eine Klasse, die die Logik implementiert, z.B.: MyView.xaml.cs. Die Zuordnung erfolgt über die XAML-Datei:
<Page
...
x:Class="TechLog.MyView"
...
Um auf ein Steuerelement aus der Klasse zugreifen zu können, benötigt es einen Namen. Außerdem kann ein Event ausgelöst werden, falls es ausgewählt wird. Dies geschieht wie folgt:
<Element
...
x:Name="myName"
SelectionChanged="ListView_SelectionChanged"
...
</Element>
In der zugehörigen Klasse kann man darauf beispielsweise so reagieren:
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
List<String> itemsList = new List<string>();
itemsList.Add("Item 4");
itemsList.Add("Item 5");
myName.ItemsSource = itemsList;
}
Buttons
Dem Button muss ein Handler zugeordnet werden damit beim Klick etwas geschieht:
<Button ...
Click="CalculateHandler">
</Button>
In der Klasse wird dann die folgende Methode aufgerufen:
private void CalculateHandler(object sender, RoutedEventArgs e)
{
...
}
Button drehen
<Button ...
RenderTransformOrigin="0.5,0.5"
Style="{StaticResource NavigationBackButtonNormalStyle}">
<UIElement.RenderTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="180" />
</UIElement.RenderTransform>
</Button>
Bild anstelle des Icons
<Button Style="{StaticResource NavigationBackButtonNormalStyle}">
<Button.Template>
<ControlTemplate>
<Image Source="Assets/download-2-45.png" />
</ControlTemplate>
</Button.Template>
</Button>
Model
App.xaml.cs
protected async override void OnLaunched(LaunchActivatedEventArgs e)
{
//
// Instantiate DAOs
//
ITechLogDao tlDao = new TechLogDummyDao();
App.Current.Resources["techLogDao"] = tlDao;
...
}
Binding
In der Model-Klasse (*.cs)
public class MyClass : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
...
private Int32 _MyVariable;
public Int32 MyMethode
{
get { return _MyVariable; }
set { _MyVariable = value; NotifyPropertyChanged("MyMethode"); }
}
...
public void SetDemoData()
{
this.MyMethode= "Ein Text";
}
}
In der Controller Klasse (*.xaml.cs)
MyClass m_Instance = new MyClass();
public ControlleClass()
{
this.InitializeComponent();
SetBindings();
...
}
private void SetBindings()
{
TextBox[] textBoxes = { viewElementName };
string[] properties = { "MyMethode" };
for (int i = 0; i < textBoxes.Count(); i++)
{
Bind(m_Instance, textBoxes[i], properties[i], TextBox.TextProperty);
}
}
// sinnvoll in einer Utility-Klasse
public static void Bind(Object context, Control control, string path, DependencyProperty prop)
{
control.DataContext = context;
Binding binding = new Binding() { Path = new PropertyPath(path) };
binding.Mode = BindingMode.TwoWay;
control.SetBinding(prop, binding);
}
In der View (*.xaml)
...
<TextBox x:Name="viewElementName" ... />
...
weiter Variante
<Page.Resources>
<!-- Collection of items displayed by this page -->
<CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
...
</Page.Resources>
Styles
App.xaml
Hier wird auf die Ressource mit den Styles verwiesen. Im Verzeichnis Styles gibt es die Datei Styles.xaml.
<Application ...>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Styles.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Vererbung: Ableitung von weiteren Styles -->
<ResourceDictionary.MergedDictionaries>
<!--<ResourceDictionary Source="/Common/StandardStyles.xaml" />-->
</ResourceDictionary.MergedDictionaries>
<!-- Definition eines Wertes -->
<SolidColorBrush x:Key="AppBackgroundColor" Color="#FFB48217"/>
<!-- Verebung: Erweiterung eines bestehenden Styles -->
<Style x:Key="BigTextBox" TargetType="TextBox">
<Setter Property="FontSize" Value="30"/>
<Setter Property="Margin" Value="10,0,10,0"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<!-- Verebung: Erweiterung des vorherigen Styles -->
<Style x:Key="BigTextNumberBox" TargetType="TextBox" BasedOn="{StaticResource BigTextBox}">
<Setter Property="InputScope" Value="Number"/>
</Style>
</ResourceDictionary>
In der Anwendung
Nun kann man die Styles mit den in Styles.xaml definierten Keys verwenden, z.B. könnte es wie folgt aussehen:
...
<Grid Background="{StaticResource AppBackgroundColor}">
...