Kapitel 4 - Komponenten

4.1 Übersicht

<Button>
  <FlowPanel>
    <Text>Hallo</Text>
    <Image Source="xxx.jpg" />
  </FlowPanel>
</Button>

<Window xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <FlowPanel>
    <Button>
      <FlowPanel>
        <Image Source="../images/Kreis.gif" />
        <Text>Klick mich 1</Text>
      </FlowPanel>
    </Button>
    <Button Content="Klick mich 2" />
    <Button>
      Klick mich 3
    </Button>
    <Button>
      <Text>Klick mich 4</Text>
    </Button>
    <Button>
      <Image Source="../images/Kreis.gif" />
    </Button>
    <Button Width="200" Height="80" FontSize="20" 
            Background="LightBlue" Foreground="Blue"
            BorderBrush="Gray" BorderThickness="3"
            Cursor="Hand"
            Margin="20,20,20,20"
            Opacity="0.5">
      Klick Klack
    </Button>
  </FlowPanel>
</Window>

<Window xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <GridPanel>
    <CheckBox Content="Frau" CheckState="Unchecked" />
    <CheckBox CheckState="Indeterminate">
      Herr
    </CheckBox>
    <CheckBox BorderThickness="3"
              CheckState="Checked"
              ID="KindCheck"
              Margin="0,20,0,0">
      <FlowPanel>
        <Image Source="../images/Kreis.gif" />
        <Text>Kind</Text>
      </FlowPanel>
    </CheckBox>

<!-- funktioniert nicht im IE wegen Code
    <CheckBox CheckStateChanged="StatusCheck" ID="CheckBox1" 
              Content="Markiere mich" ThreeState="true" />
      <x:Code>
        <![CDATA[
          void StatusCheck(object sender, CheckStateChangedEventArgs e)
          {
            if((sender as CheckBox).CheckState == CheckState.Checked)
              MessageBox.Show("Hallo");
          }
        ]]>
      </x:Code>
-->
  </GridPanel>
</Window>

<FlowPanel xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <GridPanel>
    <ComboBox>
      <ListItem>Auswahl 1</ListItem>
      <ListItem>Auswahl 2</ListItem>
      <ListItem>Auswahl 3</ListItem>
    </ComboBox>
    <ComboBox MaxDropDownHeight="100" SelectedIndex="1" Height="50">
      <ListItem>Auswahl 1</ListItem>
      <ListItem>Auswahl 2</ListItem>
      <ListItem><Image Source="../images/Kreis.gif" /></ListItem>
    </ComboBox>

<!-- Code wird im IE nicht unterstützt
    <ComboBox MaxDropDownHeight="100" IsEditable="true" ID="CB1" KeyDown="CB1KeyDown" 
              SelectionChanged="CB1SelectionChanged">
      <ListItem>Auswahl 1</ListItem>
      <ListItem>Auswahl 2</ListItem>
      <ListItem>Auswahl 3</ListItem>
    </ComboBox>

      <x:Code>
        <![CDATA[
          void CB1SelectionChanged(object sender, SelectionChangedEventArgs e)
          {
            ComboBox cb = (sender as ComboBox);
            if(cb.SelectedItem == typeof(ListItem))
            {
              ListItem li = cb.SelectedItem as ListItem;
              String s = li.Content.ToString();
              MessageBox.Show(s);
            }
          }
        ]]>
      </x:Code>
-->

<!-- in Windows.xaml.cs einfügen, da KeyEventArgs momentan nicht gefunden wird
        void CB1KeyDown(object sender, KeyEventArgs e)
        {
          if (e.Key == Key.Return)
          {
            ComboBox cb = (sender as ComboBox);
            String NewItemText = cb.Text;
            ListItem li = new ListItem();
            li.Content = NewItemText;
            cb.Items.Add(li);
          }
        }
-->
  </GridPanel>
</FlowPanel>

<!-- Im Beispiel sind die Ereignisse entfernt worden, der korrekte Code ist auskommentiert -->
<FlowPanel xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <GridPanel>
    <TextBox>
      <TextBox.ContextMenu>
        <ContextMenu>
          <MenuItem Header="Item 1">
            <MenuItem Header="Item 1.1" Click="MenuItemClick" />
            <MenuItem Header="Item 1.2" Click="MenuItemClick" />
          </MenuItem>
          <MenuItem Header="Item 2" Click="MenuItemClick" />
          <MenuItem Click="MenuItemClick" ID="TextBild">
            <MenuItem.Header>
              <FlowPanel>
                <Text>Item 3</Text>
                <Image Source="../images/Kreis.gif" />
              </FlowPanel>
            </MenuItem.Header>
          </MenuItem>
        </ContextMenu>
      </TextBox.ContextMenu>
    </TextBox>
    <x:Code>
      <![CDATA[
        void MenuItemClick(object sender, RoutedEventArgs e)
        {
          if((sender as MenuItem).Header is String)
            MessageBox.Show((sender as MenuItem).Header.ToString());
          else
            MessageBox.Show((sender as MenuItem).ID.ToString());          
        }
      ]]>
    </x:Code>
  </GridPanel>
</FlowPanel>

<Grid xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <FlowPanel>
    <ScrollViewer Width="200" Height="200" VerticalScrollBarVisibility="Auto">
      <Rectangle Width="500" Height="500" Fill="RadialGradient Blue Yellow" />
    </ScrollViewer>
  </FlowPanel>
</Grid>

<NavigationWindow ID="MainWin" xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <FlowPanel FlowOrientation="Vertical">
    <HyperLink NavigateUri="Hyperlink2.xaml">HyperLink</HyperLink>
    <HyperLink NavigateUri="http://www.del-net.com/avalon/index.html">Avalon Tutorial</HyperLink>
    <HyperLink NavigateUri="file:///E:/avalon/examples/Hyperlink2.xaml">HyperLink</HyperLink>
  </FlowPanel>
</NavigationWindow>

<Grid xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <FlowPanel>
    <HyperLink NavigateUri="Hyperlink1.xaml">Zurueck</HyperLink>
  </FlowPanel>
</Grid>

<Window xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <FlowPanel FlowOrientation="Vertical">
    <RepeatButton Delay="100" Interval="50" Width="100" Height="30"  Click="Erhoehe" />
    <def:Code>
      <![CDATA[
        void Erhoehe(object sender, RoutedEventArgs e)
        {
          Int32 Num = Convert.ToInt32(tbZahl.TextContent);
          tbZahl.TextContent = ((Num + 1).ToString());
        }
      ]]>
    </def:Code>
    <Text ID="tbZahl">0</Text>
  </FlowPanel>
</Window>

<FlowPanel xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <GridPanel>
    <Text TextContent="Zoom" />
    <ZoomControl />

<!--
    <ZoomControl SelectionChanged="ZCSelectionChanged" />
    <x:Code>
      <![CDATA[
        void ZCSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
          ZoomControl cb = (sender as ZoomControl);
          String s = (cb.SelectedItem as ContentControl).Content.ToString();         
          ZoomButton.FontSize = new FontSize(15 * cb.Zoom);         
          /*
          switch(s)
          {
            case "75%": ZoomButton.FontSize = new FontSize(7.5); break;
            case "100%": ZoomButton.FontSize = new FontSize(10); break;
            case "200%": ZoomButton.FontSize = new FontSize(20); break;
          } 
          */
        }
      ]]>
    </x:Code>
-->
    <Button ID="ZoomButton">
      Hallo
    </Button>
  </GridPanel>
</FlowPanel>

4.2 Standardeigenschaften

4.2 Ressourcen

<FlowPanel.Resources>
  <SolidColorBrush def:Name="MyNiceBrush" Color="LightGreen"/> 
</FlowPanel.Resources>
...
<Rectangle Width="100" Height="100" Fill="{MyNiceBrush}" />

4.3 Stile definieren und anwenden

<Window xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
 <DockPanel.Resources>
 <Style def:Name="NiceButton">
 <Button FontSize="24" FontFamily="Verdana" Background="LightBlue" />
 </Style>
 </DockPanel.Resources>
 ...
 <Button DockPanel.Dock="Top" Style="{NiceButton}">
 Klick mich
 </Button>
 ...
</Window>

 <DockPanel.Resources>
 <Style def:Name="NiceButton">
 <Button FontSize="24" FontFamily="Verdana" Background="LightBlue" />
 </Style>
 <Style def:Name="MuchNicerButton" BasedOn="{NiceButton}">
 <Button FontSize="24" FontFamily="Verdana" Foreground="Red" />
 </Style>
 </DockPanel.Resources>

<Style def:Name="MuchNicerButton" BasedOn="{NiceButton}">
  <Button FontSize="24" FontFamily="Verdana" Foreground="Red" />
  <Style.VisualTriggers>
    <PropertyTrigger Property="IsMouseOver" Value="true">
      <Set PropertyPath="Background" Value="Yellow"/>
    </PropertyTrigger>        
 </Style.VisualTriggers>
</Style>

<Style.VisualTriggers>
  <MultiPropertyTrigger>
    <MultiPropertyTrigger.Conditions>
      <Condition Property="IsMouseOver" Value="true" />
      <Condition Property="Foreground" Value="Red" />
    </MultiPropertyTrigger.Conditions>
    <Set PropertyPath="Background" Value="Gray" />
    <Set PropertyPath="FontWeight" Value="Bold" />
  </MultiPropertyTrigger>
</Style.VisualTriggers>

<XXX.Resources>
  <Style def:Name="MeinStil">
    <Element />
    <Style.VisualTree>    
      <!-- Darstellung des Elements -->
    </Style.VisualTree>
  </Style>
</XXX.Resources>
<Element Style="{MeinStil}" ... />

<Button Width="200" Height="20" />
<Style.VisualTree>
  <Canvas Width="100%" Height="100%">
    <Rectangle RadiusX="5" RadiusY="5" Width="100%" Height="100%" Stroke="Blue" Fill="LightBlue"  />
  </Canvas>
</Style.VisualTree>

<ContentPresenter ContentControl.Content="*Alias(Target=Content)" />
<ContentPresenter ContentControl.Content="Ein fester Wert" />

<FlowPanel HorizontalAlignment="center" VerticalAlignment="center" Width="100%" Height="100%">
  <ContentPresenter ContentControl.Content="*Alias(Target=Content)" />
</FlowPanel>

<Style def:Name="SpecialButton">
  <Button Width="200" Height="20" />
  <Style.VisualTree>
    <Canvas Width="100%" Height="100%">
      <Rectangle def:StyleID="ActiveStyle" RadiusX="5" RadiusY="5" Width="100%" Height="100%"
                 Stroke="Blue" Fill="*Alias(Target=Background)"  />
      <FlowPanel HorizontalAlignment="center" VerticalAlignment="center" Width="100%" Height="100%">
        <ContentPresenter ContentControl.Content="*Alias(Target=Content)" />
      </FlowPanel>
    </Canvas>
  </Style.VisualTree>
  <Style.VisualTriggers>
    <PropertyTrigger Property="IsMouseOver" Value="true">
      <Set Target="ActiveStyle" PropertyPath="Fill" Value="LightYellow" />
      <Set Target="ActiveStyle" PropertyPath="Opacity" Value=".5" />
    </PropertyTrigger>
  </Style.VisualTriggers>
</Style>

<Style def:Name="SpecialButtonText">
  <ContentPresenter />
  <Style.VisualTree>
    <Text FontFamily="Verdana" Foreground="Red" FontWeight="Bold" FontSize="14pt">
      <Text.TextContent>
        <Bind/>
      </Text.TextContent>
    </Text>
  </Style.VisualTree>
</Style>

using System.Text;
...
void Klack(object sender, RoutedEventArgs e)
{
  Button b = sender as Button;
  StringBuilder sb1 = new StringBuilder();

  VisualCollection vc = VisualOperations.GetChildren(b);
  if (vc.Count == 0)
  {
    sb1.Append("Keine Kinder");
    sb1.Append(b.GetType());
  }
  else
  {
    sb1.Append(b.GetType());
    sb1.Append(Environment.NewLine);
    WriteToVisualTreeInfo(sb1, vc, 1);
  }
  tb1.Text = sb1.ToString();
}

void GetVisualTreeInfo(StringBuilder sb, VisualCollection vc, int level)
{
  foreach (Visual v in vc)
  {
    sb.Append(new string(' ', level * 2));
    sb.Append(v.GetType());
    sb.Append(Environment.NewLine);
 
   VisualCollection vc = VisualOperations.GetChildren(v);
   if (vc.Count > 0)
   {
     GetVisualTreeInfo(sb, vc, level + 1);
   }
}

4.4 Layoutkontrolle

Canvas

<Window>
 <Canvas Background="LightBlue">
  <Button Canvas.Left="10" Canvas.Top="10">Hallo</Button>
 </Canvas>
</Window>

Window win = new Window ();
Canvas can = new Canvas ();
can.Background = Brushes.LightBlue;
Button btn = new Button();
btn.Content = "Hallo";
Canvas.SetTop(btn, new System.Windows.Length(10));
Canvas.SetLeft(btn, new System.Windows.Length(10));
can.Children.Add (btn);
win.Content= can;

DockPanel

<Window Width="300" Height="200" xmlns="http://schemas.microsoft.com/2003/xaml">
 <DockPanel DockPanel.Dock="Fill">
 <FlowPanel DockPanel.Dock="Top" Background="LightGreen">
 <Button>Neu</Button> 
 <Button>Öffnen</Button> 
 </FlowPanel>
 <FlowPanel DockPanel.Dock="Bottom" Background="LightSteelBlue">
 <Button>Dies ist die Statusleiste</Button>
 </FlowPanel> 
 <TextPanel DockPanel.Dock="Fill" Background="LightYellow">
 Halllllllo
 </TextPanel>
  </DockPanel>
</Window>

FlowPanel fp = new FlowPanel();
DockPanel.SetDock(fp, Dock.Top);

FlowPanel

<Window Width="250" Height="100">
  <FlowPanel>
    <Button>Neu</Button>
    <Button>Öffnen</Button>
    <Button>Schließen</Button>
    <Button>Beenden</Button>  
  </FlowPanel>
</Window>

TextPanel

<Window Width="300" Height="120">
  <TextPanel DockPanel.Dock="Fill" ColumnCount="2" ColumnGap="10" 
 ColumnRuleBrush="Red" ColumnRuleWidth="3">
    <Block FontSize="14">
      Dies ist ein Text mit unterschiedlichen <Italic>Schriftstilen</Italic> und 
      <Inline FontFamily="Courier New">Schriftarten</Inline>.
      Dies ist ein Text mit unterschiedlichen <Italic>Schriftstilen</Italic> und 
      <Inline FontFamily="Courier New">Schriftarten</Inline>.
    </Block>
  </TextPanel>
</Window>

Grid

<Grid xmlns="http://schemas.microsoft.com/2003/xaml"
 Width="300" Height="200" ShowGridLines="true" Background="LightGreen">
 
 <ColumnDefinition />
 <ColumnDefinition />
 <ColumnDefinition />
 <RowDefinition />
 <RowDefinition />

 <Rectangle Grid.Column="0" Grid.Row="0" Grid.Left="5" Grid.Top="5" 
 Grid.Bottom="5" Grid.Right="5" Fill="LightYellow">
 </Rectangle>
 <Rectangle Grid.Column="1" Grid.Row="0" Grid.Left="5" Grid.Top="5" 
 Grid.Bottom="5" Grid.Right="5" Fill="LightYellow">
 </Rectangle>
 <Rectangle Grid.Column="2" Grid.Row="0" Grid.Left="5" Grid.Top="5" 
 Grid.Bottom="5" Grid.Right="5" Fill="LightYellow">
 </Rectangle>
 <Rectangle Grid.Column="0" Grid.Row="1" Grid.Left="5" Grid.Top="5" 
 Grid.Bottom="5" Grid.Right="5" Fill="LightYellow">
 </Rectangle>
 <Rectangle Grid.Column="1" Grid.Row="1" Grid.Left="5" Grid.Top="5" 
 Grid.Bottom="5" Grid.Right="5" Grid.ColumnSpan="2" Fill="LightYellow">
 </Rectangle>
 <Text Grid.Column="0" Grid.Row="0" Grid.Left="40" Grid.Top="40">0, 0</Text>
 <Text Grid.Column="1" Grid.Row="0" Grid.Left="40" Grid.Top="40">1, 0</Text>
 <Text Grid.Column="2" Grid.Row="0" Grid.Left="40" Grid.Top="40">2, 0</Text>
 <Text Grid.Column="0" Grid.Row="1" Grid.Left="40" Grid.Top="40">0, 1</Text>
 <Text Grid.Column="1" Grid.Row="1" Grid.Left="40" Grid.Top="40">1, 1</Text>
 <Text Grid.Column="2" Grid.Row="1" Grid.Left="40" Grid.Top="40">2, 1</Text>
</Grid>

public partial class Window1 : Window
{
  System.Windows.Controls.Grid grid1;
  System.Windows.Controls.ColumnDefinition col1;
  System.Windows.Controls.ColumnDefinition col2;
  System.Windows.Controls.RowDefinition row1;
  System.Windows.Shapes.Rectangle rect1;
  System.Windows.Shapes.Rectangle rect2;
  protected override void OnLoading(EventArgs args)
  {
    grid1 = new Grid();
    grid1.Width = new Length(200);
    grid1.Height = new Length(100);
    grid1.ShowGridLines = true;
    grid1.Background = new SolidColorBrush(Colors.LightBlue);
 
   col1 = new ColumnDefinition();
    col2 = new ColumnDefinition();
    grid1.ColumnDefinitions.Add(col1);
    grid1.ColumnDefinitions.Add(col2);
    row1 = new RowDefinition();
    grid1.RowDefinitions.Add(row1);
  
   rect1 = new Rectangle();
    rect1.Fill = new SolidColorBrush(Colors.LightSeaGreen);
    Grid.SetColumn(rect1, 0);
    Grid.SetRow(rect1, 1);
    Grid.SetTop(rect1, new Spacing(10));

    rect2 = new Rectangle();
    rect2.Fill = new SolidColorBrush(Colors.LightSeaGreen);
    Grid.SetColumn(rect2, 1);
    Grid.SetRow(rect2, 0);
    Grid.SetTop(rect2, new Spacing(10));

    grid1.Children.Add(rect1);
    grid1.Children.Add(rect2);
    this.Content = grid1;
    base.OnLoading(args);
  }
}

FixedPanel

StackPanel

BulletPanel

<TextPanel xmlns="http://schemas.microsoft.com/2003/xaml">
  <BulletPanel Height="25" Width="150" Margin="10">
    <RadioButton/><Text>A RadioButton Bullet</Text>
  </BulletPanel>
  <BulletPanel Height="25" Width="150" Margin="10">
    <CheckBox/>
    <Text>A CheckBox Bullet</Text>
  </BulletPanel>
</TextPanel>

TabPanel

<Grid xmlns="http://schemas.microsoft.com/2003/xaml" Width="300" Height="200">
  <TabControl TabStripPlacement="Top">
    <TabItem Header="Hallo Tab 1">
      <TabPanel Background="LightYellow" Cursor="Hand">
        <Text>Dies ist der erste Tab</Text>
      </TabPanel>
    </TabItem>
    <TabItem Header="Hallo Tab 2">
      <TabPanel Background="LightBlue">
        <Text>Dies ist der erste Tab</Text>
      </TabPanel>
    </TabItem>
  </TabControl>
</Grid>

Table

<TextPanel>
  <Table>
    <TableColumn />
    <TableHeader>
      <TableRow>
        <TableCell>...</TableCell>
        <TableCell>...</TableCell>
      </TableRow>
    </TableHeader>
    <TableBody>
     ...
    </TableBody>
    <TableFooter>
    </TableFooter>
  </Table>
</TextPanel>

<TextPanel xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
  <Table CellSpacing="3">
     <TableColumn Width="150"/>
      <TableColumn Width="100"/>
    <TableHeader>
      <TableRow>
         <TableCell ColumnSpan="2">
           <Text FontSize="18pt" FontWeight="Bold">
             Einkaufsliste
           <Text.TextDecorations>
            <TextDecorations>
             <TextDecoration Location="Underline" />
            </TextDecorations>
           </Text.TextDecorations>
         </Text></TableCell>
      </TableRow>
      <TableRow Background="LightGray">
         <TableCell><Text>Artikel</Text></TableCell>
         <TableCell><Text>Preis</Text></TableCell>
      </TableRow>
    </TableHeader>

    <TableBody>
      <TableRow>
         <TableCell><Text>Brot</Text></TableCell>
         <TableCell><Text>3,00 Euro</Text></TableCell>
      </TableRow>
      <TableRow>
         <TableCell><Text>Butter</Text></TableCell>
         <TableCell><Text>2,00 Euro</Text></TableCell>
      </TableRow>
    </TableBody>

    <TableFooter>
      <TableRow Background="LightGray">
         <TableCell><Text>Summe</Text></TableCell>
         <TableCell><Text>5.00 Euro</Text></TableCell>
      </TableRow>
    </TableFooter>
  </Table>
</TextPanel>