WM8.1

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}">
...