Sdílet prostřednictvím

Návod: Styl obsahu WPF

  • Článek

Tento článek ukazuje, jak použít styly na ovládací prvek Windows Presentation Foundation (WPF) hostovaný ve Formuláři systému Windows.

Požadavky

K dokončení tohoto návodu potřebujete Visual Studio.

Vytvoření projektu

Otevřete Visual Studio a vytvořte nový projekt aplikace Windows Forms v jazyce Visual Basic nebo Visual C# s názvem StylingWpfContent.

Poznámka

Při hostování obsahu WPF se podporují pouze projekty C# a Visual Basic.

Vytvoření typů ovládacích prvků WPF

Po přidání typu ovládacího prvku WPF do projektu ho můžete hostovat v ovládacím prvku ElementHost.

  1. Do řešení přidejte nový projekt WPF UserControl. Použijte výchozí název pro typ ovládacího prvku UserControl1.xaml. Další informace naleznete v tématu Návod: Vytvoření nového obsahu WPF ve Windows Forms při návrhu.

  2. V návrhovém zobrazení se ujistěte, že je vybraná UserControl1.

  3. V okně Vlastnosti nastavte hodnotu vlastností Width a Height na 200.

  4. Přidejte do UserControl ovládací prvek System.Windows.Controls.Button a nastavte hodnotu vlastnosti Content na Cancel.

  5. Přidejte druhý ovládací prvek System.Windows.Controls.Button do UserControl a nastavte hodnotu vlastnosti Content na OK.

  6. Sestavte projekt.

Použití stylu u ovládacího prvku WPF

U ovládacího prvku WPF můžete použít různé styly, abyste změnili jeho vzhled a chování.

  1. Otevřete Form1 v nástroji Windows Forms Designer.

  2. V panelu nástrojů poklikáním na UserControl1 vytvořte instanci UserControl1 ve formuláři.

    Instance UserControl1 je hostována v novém ovládacím prvku ElementHost s názvem elementHost1.

  3. Na panelu inteligentních značek pro elementHost1klikněte v rozevíracím seznamu na Upravit hostovaný obsah.

    UserControl1 se otevře v Návrháři WPF.

  4. V zobrazení XAML vložte následující kód XAML za <UserControl> otevírací značku. Tento XAML vytvoří přechod s kontrastním přechodovým ohraničením. Po kliknutí na ovládací prvek se přechody změní, aby se vygeneroval vzhled stisknutého tlačítka. Další informace naleznete v tématu úprava stylu a šablonování.

    <UserControl.Resources>
 <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#FFF" Offset="0.0"/>
     <GradientStop Color="#CCC" Offset="1.0"/>
 </LinearGradientBrush>
 <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#BBB" Offset="0.0"/>
     <GradientStop Color="#EEE" Offset="0.1"/>
     <GradientStop Color="#EEE" Offset="0.9"/>
     <GradientStop Color="#FFF" Offset="1.0"/>
 </LinearGradientBrush>
 <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#CCC" Offset="0.0"/>
     <GradientStop Color="#444" Offset="1.0"/>
 </LinearGradientBrush>
 <LinearGradientBrush x:Key="BorderBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#CCC" Offset="0.0"/>
     <GradientStop Color="#444" Offset="1.0"/>
 </LinearGradientBrush>
 <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#444" Offset="0.0"/>
     <GradientStop Color="#888" Offset="1.0"/>
 </LinearGradientBrush>

 <Style x:Key="SimpleButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
     <Setter Property="Background" Value="{StaticResource NormalBrush}"/>
     <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="{x:Type Button}">
                 <Grid x:Name="Grid">
                     <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
                     <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                 </Grid>
                 <ControlTemplate.Triggers>
                     <Trigger Property="IsPressed" Value="true">
                         <Setter Property="Background" Value="{StaticResource PressedBrush}" TargetName="Border"/>
                         <Setter Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" TargetName="Border"/>
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>
</UserControl.Resources>

  5. Použijte styl SimpleButton definovaný v předchozím kroku na tlačítko Zrušit vložením následujícího kódu XAML do značky <Button> tlačítka Zrušit.

    Style="{StaticResource SimpleButton}

    Deklarace tlačítka bude vypadat přibližně takto:

    <Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
             Style="{StaticResource SimpleButton}">Cancel</Button>

  6. Sestavte projekt.

  7. Otevřete Form1 v nástroji Windows Forms Designer.

  8. Nový styl se použije u ovládacího prvku tlačítka.

  9. V nabídce Ladění vyberte Spustit ladění a spusťte aplikaci.

  10. Klikněte na tlačítka OK a Zrušit a prohlédněte si rozdíly.

Viz také