Hallo Community,
Da ich immer lese das "Man sich ncht mit WinForms sondern mit WPF "beschäftige soll habe ich mich mal mit XAML beschäftigt.
Dieses Tutorial ist ein Anfang,also noch verbesserungswürdig .
Hier mal eine kleine Anleitung zum erstellen eines runden Buttons:
1:Wenn ihr in VB seid,"Neues Projekt",WPF-Anwendung.
2:Ihr seht ein leeres Fenster,und unterhalb ist noch eines mit gefärbten Texten.Das macht ihr jetzt größ(mache ich zumindest immer).
Ihr seht folgenden Code:
In das "Grid"(markiert durch <Grid></Grid>) gebt ihr nun folgendes ein:
Nun habt ihr einen Button im Grid(DesignerSeite),den ihr noch nicht sehen könnt(ja,ich weiß ).
Für einen Aussenkreis nehmt ihr nun vor(!) das Grid diesen Code:
Um einen Innenkreis zu zeichnen braucht ihr diesen XAML-Code(Bitte nach dem "</Ellipse>" einfügen):
So,jetzt braucht ihr einen sogenannten "ContentPresenter" um die Content(Text)-Eigenschaft zu sehen(bitte nach dem zweiten"</Ellipse>" einfügen):
So,nun geht es nach dem </Grid> in den <Window.Resources> weiter:
Ein bisschen viel Code auf einmal:
1.Bei dem <Trigger Property="Button.IsMouseOver" Value="true"> wird die Farbe von dem Button geändert,wenn der Mauszeiger über dem Button ist(Wie evnts,bloß im Designer )
2.<Trigger Property="Button.IsPressed" Value="true"> :Hier wird der Button,wenn er gedrückt wird,kleiner gemacht(Debug).
Zum Schluss müsste euer Code nun so aussenhen:
So,ich hoffe es hat etwas gebracht,auf Frage werde ich vielleicht auch noch einen schiefen Button,Bunte,Animinationen und Trigger machen.
Viel Spaß damit.
Im Anhang nochmal ein Scrennshot.
Ricky
Da ich immer lese das "Man sich ncht mit WinForms sondern mit WPF "beschäftige soll habe ich mich mal mit XAML beschäftigt.
Dieses Tutorial ist ein Anfang,also noch verbesserungswürdig .
Hier mal eine kleine Anleitung zum erstellen eines runden Buttons:
1:Wenn ihr in VB seid,"Neues Projekt",WPF-Anwendung.
2:Ihr seht ein leeres Fenster,und unterhalb ist noch eines mit gefärbten Texten.Das macht ihr jetzt größ(mache ich zumindest immer).
Ihr seht folgenden Code:
In das "Grid"(markiert durch <Grid></Grid>) gebt ihr nun folgendes ein:
Nun habt ihr einen Button im Grid(DesignerSeite),den ihr noch nicht sehen könnt(ja,ich weiß ).
Für einen Aussenkreis nehmt ihr nun vor(!) das Grid diesen Code:
XML-Quellcode
- <Window.Resources>
- <ControlTemplate x:Key="RunderButtonTemplate">
- <Grid>
- <Ellipse x:Name="AussenKreis" Width="120" Height="120">
- <Ellipse.Fill>
- <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
- <GradientStop Offset="0" Color="Black"/>
- <GradientStop Offset="1" Color="Red"/>
- </LinearGradientBrush>
- </Ellipse.Fill>
- </Ellipse>
- </Grid>
- </ControlTemplate>
- </Window.Resources>
Um einen Innenkreis zu zeichnen braucht ihr diesen XAML-Code(Bitte nach dem "</Ellipse>" einfügen):
So,jetzt braucht ihr einen sogenannten "ContentPresenter" um die Content(Text)-Eigenschaft zu sehen(bitte nach dem zweiten"</Ellipse>" einfügen):
So,nun geht es nach dem </Grid> in den <Window.Resources> weiter:
XML-Quellcode
- <ControlTemplate.Triggers>
- <Trigger Property="Button.IsMouseOver" Value="true">
- <Setter TargetName="AussenKreis" Property="Fill" Value="Purple"/>
- </Trigger>
- <Trigger Property="Button.IsPressed" Value="true">
- <Setter Property="RenderTransform">
- <Setter.Value>
- <ScaleTransform ScaleX="0.9" ScaleY=".9"/>
- </Setter.Value>
- </Setter>
- <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
- </Trigger>
- </ControlTemplate.Triggers>
- </ControlTemplate>
Ein bisschen viel Code auf einmal:
1.Bei dem <Trigger Property="Button.IsMouseOver" Value="true"> wird die Farbe von dem Button geändert,wenn der Mauszeiger über dem Button ist(Wie evnts,bloß im Designer )
2.<Trigger Property="Button.IsPressed" Value="true"> :Hier wird der Button,wenn er gedrückt wird,kleiner gemacht(Debug).
Zum Schluss müsste euer Code nun so aussenhen:
XML-Quellcode
- <Window x:Class="MainWindow"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Title="MainWindow" Height="350" Width="525">
- <Window.Resources>
- <ControlTemplate x:Key="RunderButtonTemplate">
- <Grid>
- <Ellipse x:Name="AussenKreis" Width="120" Height="120">
- <Ellipse.Fill>
- <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
- <GradientStop Offset="0" Color="Black"/>
- <GradientStop Offset="1" Color="Red"/>
- </LinearGradientBrush>
- </Ellipse.Fill>
- </Ellipse>
- <Ellipse Width="100" Height="100">
- <Ellipse.Fill>
- <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
- <GradientStop Offset="0" Color="DarkGreen"/>
- <GradientStop Offset="1" Color="DarkCyan"/>
- </LinearGradientBrush>
- </Ellipse.Fill>
- </Ellipse>
- <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Button.Content}"/>
- </Grid>
- <ControlTemplate.Triggers>
- <Trigger Property="Button.IsMouseOver" Value="true">
- <Setter TargetName="AussenKreis" Property="Fill" Value="Purple"/>
- </Trigger>
- <Trigger Property="Button.IsPressed" Value="true">
- <Setter Property="RenderTransform">
- <Setter.Value>
- <ScaleTransform ScaleX="0.9" ScaleY=".9"/>
- </Setter.Value>
- </Setter>
- <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
- </Trigger>
- </ControlTemplate.Triggers>
- </ControlTemplate>
- </Window.Resources>
- <Grid>
- <Button Name="Button1" Foreground="White" Template="{StaticResource RunderButtonTemplate}">Hallo WPF</Button>
- </Grid>
- </Window>
So,ich hoffe es hat etwas gebracht,auf Frage werde ich vielleicht auch noch einen schiefen Button,Bunte,Animinationen und Trigger machen.
Viel Spaß damit.
Im Anhang nochmal ein Scrennshot.
Ricky
Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „ErfinderDesRades“ ()