Question

I am experimenting with WPF/XAML and i have a basic understanding of the available controls. What i still dont understand is how to combine them.
To practice this, i tried to copy the following controls:

The components i designed look like this:

And this is the coding:

<Window x:Class="Uranus.View.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="469" Width="750">
<Window.Resources>
    <Style x:Key="Flat">
        <Setter Property="Control.Background" Value="{x:Null}" />
        <Setter Property="Control.BorderBrush" Value="{x:Null}" />
        <Style.Triggers>
            <Trigger Property="Control.IsMouseOver" Value="True">
                <Setter Property="Control.Background" Value="{x:Null}" />
                <Setter Property="Control.BorderBrush" Value="{x:Null}" />
                <Setter Property="Control.FontWeight" Value="Bold" />
            </Trigger>
            <Trigger Property="Control.IsFocused" Value="True">
                <Setter Property="Control.FontWeight" Value="Bold" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <!-- -->
    <Rectangle Fill="LightBlue" Margin="277,21,160,346"/>

    <!-- -->
    <TextBox Height="30" HorizontalAlignment="Left" Margin="277,113,0,0" Name="textBox1" VerticalAlignment="Top" Width="272" />

    <!-- -->
    <Image Source="..\Pictures\Suchlupe.jpg" Margin="309,171,391,231" ></Image>

    <!-- -->
    <TextBox Height="23" HorizontalAlignment="Left" Margin="374,176,0,0" Name="textBoxSucheTabelle" VerticalAlignment="Top" Width="120" Foreground ="LightGray" Text="Nachricht suchen"/>

    <!-- -->
    <Button Name="buttonSuchpfeil" Style="{StaticResource Flat}" Margin="509,171,197,232">
        <StackPanel>
            <Image Source="..\Pictures\Suchpfeil.jpg"></Image>
        </StackPanel>
    </Button>
  </Grid>
</Window>

My question is: How can i combine my controls to look like in the example? I really want to learn more about WPF!

Thanks for any help!

Answer 1

There are a lot of resources out there to understanding XAML, especially for WPF. I’d suggest the following to learn more:

1. Purchase and read WPF/XAML books.
2. Lookup examples online on styling controls.
3. Understand the controls that are shipped with the .NET Framework, as well as any third party control libraries you plan to use.
4. Use Expression Blend to play around with user control design. It is extremely powerful and has a Photoshopesque feel to it.
5. Look at the XAML generated by designers and tweek things to see how certain changes affect the control layout and behavior.