in

dotNet Umbria

Il primo User Group in Umbria sul mondo .Net

Paolo Possanzini

WPF: Costruiamo un RSS Reader passo 2 (L'interfaccia utente)

Come secondo passo iniziano a creare l'interfaccia utente.

Creiamo un nuovo Windows Forms e lo chiamiamo MainForm.xaml. Ci spostiamo sul file App.xaml e impostiamo StartupUri a MainForm.xaml.
Vediamo come creare la nostra UI. La mia idea iniziale è quella di creare un menù in alto e dividere il resto della UI in due colonne. Quella di sinistra come colonna di controllo, il resto come area di lettura dei feeds.

[code language="XML"]

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:rssreader ="clr-namespace:WpfRssReader"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    x:Class="WpfRssReader.MainForm"
    Title="Heros RSS Reader" Height="600" Width="800">
    <Grid Width="Auto" Height="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="55"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Rectangle Fill="#FF000000" Stroke="#FF000000" StrokeThickness="0" RadiusX="0" RadiusY="0" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="Auto"/>
        <TextBlock Margin="24,8,16,8" FontFamily="Segoe UI" FontSize="24" Foreground="#FFD5D5D5" Text="Heros {Community} RSS Reader" TextWrapping="Wrap"/>
    </Grid>
</Window>

[/code]

Ho già inserito nella struttura, lo spazio dei nomi dell'applicazione e l'ho chiamata "rssreader".
Dividiamo inoltre il form in due righe, una ad altezza fissa e una ad altezza variabile attraverso i due tag RowDefinition . Inserisco due oggetti per dare al form un leggero stile "Heros".

Inseriamo all'interno del form un nuovo Grid che utilizzeremo come area per il posizionamento dei controlli.
Dividiamo il Grid in righe e colonne. Dimensioniamo le colonne con un rapporto 1 a 3 utilizzando la notazione "*" e creiamo 3 righe.
Una ad altezza fissa e due riproporzionabili.

[code language="XML" ]

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:rssreader ="clr-namespace:WpfRssReader"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    x:Class="WpfRssReader.MainForm"
    Title="Heros RSS Reader" Height="600" Width="800">
    <Grid Width="Auto" Height="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="55"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="1" Grid.RowSpan="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition Height="0.3*"/>
                <RowDefinition Height="0.6*"/>
            </Grid.RowDefinitions>
        </Grid>

        <Rectangle Fill="#FF000000" Stroke="#FF000000" StrokeThickness="0" RadiusX="0" RadiusY="0" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="Auto"/>
        <TextBlock Margin="24,8,16,8" FontFamily="Segoe UI" FontSize="24" Foreground="#FFD5D5D5" Text="Heros {Community} RSS Reader" TextWrapping="Wrap"/>
    </Grid>
</Window>

[/code]

Questo è il risultato del lavoro fino a questo momento.

image

Only published comments... Apr 21 2008, 09:30 AM by Paolo Possanzini
Filed under: ,

About Paolo Possanzini

Programmatore di vecchia data, mi sono appassionato a dotnet fin dalla prima versione. Mi interesso di programmazione, accesso ai dati, Sql Server.
Con Andrea abbiamo fondato TeamDev snc.

Scarica il mio Biglietto da visita
dotNet Umbria 2007-2008
Powered by Community Server (Commercial Edition), by Telligent Systems