WPF スタイルの設計の概要

開発 2023-07-01 19:35:58 訪問数: null

記事ディレクトリ

インラインスタイル

シンプルなスタイルを創り上げます

    <Grid>
        <TextBox  Text="我是样式" FontSize="100" />
    </Grid>

ここに画像の説明を挿入
この属性は内部に直接記述されます。これがインライン スタイルです。

ページはめ込みスタイル

ただし、多数のコントロールの関数を再利用したいので、インライン スタイルを繰り返し記述するのとは異なり、ページ内スタイルを使用できます。

<Window x:Class="Test1.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test1.Views"
        mc:Ignorable="d"
        Title="MainView" Height="450" Width="800">

    
    <Grid>
        <StackPanel>
            <TextBox  Text="我是样式"
                      FontSize="80" />
            <TextBox  Text="我是样式"
                      FontSize="80" />
            <TextBox  Text="我是样式"
                      FontSize="80" />
            <TextBox  Text="我是样式"
                      FontSize="80" />
        </StackPanel>

    </Grid>
</Window>

ここに画像の説明を挿入
ページ内スタイルを使用して重複したコントロールを抽出できます

<Window x:Class="Test1.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test1.Views"
        mc:Ignorable="d"
        Title="MainView"
        Height="450"
        Width="800">
    <Window.Resources>
        <Style x:Key="TextBox1" TargetType="TextBox">
            <Style.Setters>
                <Setter Property="Text" Value="我是局部样式"/>
                <Setter Property="FontSize" Value="80"/>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <TextBox  Style="{ 
        StaticResource TextBox1}" />
            <!--行内样式优先级大于局部样式-->
            <TextBox Text="我是行内样式" Style="{ 
        StaticResource TextBox1}" />
            <TextBox  Style="{ 
        StaticResource TextBox1}" />
            <TextBox  Style="{ 
        StaticResource TextBox1}" />
        </StackPanel>

    </Grid>
</Window>

ここに画像の説明を挿入

スタイルの継承

ほぼ同じですがわずかに異なる、より多くの属性を持つスタイルを設定する必要がある場合。

次の 2 つの方法があります。

1. インラインスタイルによるオーバーライドが
最も簡単ですが、一括設定には適していません

2. スタイルの継承

<Window x:Class="Test1.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test1.Views"
        mc:Ignorable="d"
        Title="MainView"
        Height="450"
        Width="800">
    <Window.Resources>
        <Style x:Key="TextBox1" TargetType="TextBox">
            <Style.Setters>
                <Setter Property="Text"
                        Value="我是局部样式" />
                <Setter Property="FontSize"
                        Value="80" />
            </Style.Setters>
        </Style>
        <!--使用继承样式继续修改-->
        <Style x:Key="TextBox2" TargetType="TextBox" BasedOn="{StaticResource TextBox1}">
            <Style.Setters>
                <Setter Property="Text" Value="我是继承后修改的样式"/>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <TextBox  Style="{ 
        StaticResource TextBox1}" />
            <!--行内样式优先级大于局部样式-->
            <TextBox Text="我是行内样式" Style="{ 
        StaticResource TextBox1}" />
            <!--使用继承后的样式-->
            <TextBox  Style="{ 
        StaticResource TextBox2}" />
            <TextBox  Style="{ 
        StaticResource TextBox2}" />
        </StackPanel>

    </Grid>
</Window>

ここに画像の説明を挿入

コントロール スタイルは 1 つだけ継承できます

WPF コントロールは 1 つのスタイルのみを継承でき、複数のスタイルは継承できません。

エラーの例

<TextBox  Style="{ 
        StaticResource TextBox1 TextBox2}"  />
<TextBox  Style="{ 
        StaticResource TextBox1}"
          Style="{ 
        StaticResource TextBox2}" />

部分的なスタイル

注: 部分的なスタイルはユーザー コントロールでのみ使用できます。

ウィンドウコントロールとユーザーコントロールの違い

ウィンドウ コントロールはメイン ウィンドウを宣言するもので、ウィンドウ コントロールの上に重ねることができます。
ユーザー コントロールは、ウィンドウ コントロールの上にウィンドウをオーバーレイするために使用されます。

コードを使用する

ここに画像の説明を挿入

ここに画像の説明を挿入

ユーザーコントロールリファレンス

Dictionary2.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="TestColor5"
           TargetType="TextBox">
        <Setter Property="FontSize" Value="50"/>
        <Setter Property="Text"
                Value="我是被引用的样式" />
    </Style>
</ResourceDictionary>

UserControl1.xaml リファレンス

<UserControl x:Class="Test1.Views.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Test1.Views"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <!--用户控件才能引用局部样式-->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Test1;component/Resource/Dictionary2.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <TextBox  Style="{ 
        StaticResource TestColor5}" />
    </Grid>
</UserControl>

ここに画像の説明を挿入
注: 参照コード パスは絶対参照です。

Source="/(プロジェクト名);component/(フォルダーパス)/(ファイル名).xaml"は
絶対パスです。

グローバルスタイル

プロジェクト全体のスタイルを統一したい場合があります。グローバル スタイルを設定できます。

ここに画像の説明を挿入
ここに画像の説明を挿入

Dictionary1.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Dictionary1">
    <Style x:Key="TestColor4"
           TargetType="TextBox">
        <Setter Property="Text"
                Value="我是全局样式" />
        <Setter Property="FontSize" Value="50"/>
    </Style>
</ResourceDictionary>

App.xaml

<Application x:Class="Test1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Test1"
             xmlns:local2="clr-namespace:Test1.Views"
             StartupUri="Views/MainView.xaml">
    <Application.Resources>
        <!--添加全局引用路径-->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary  Source="Resource/Dictionary1.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

xamlで参照される

<Window x:Class="Test1.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test1.Views"
        mc:Ignorable="d"
        Title="MainView"
        Height="450"
        Width="800">
    <Window.Resources>


        
        <Style x:Key="TextBox1" TargetType="TextBox">
            <Style.Setters>
                <Setter Property="Text"
                        Value="我是局部样式" />
                <Setter Property="FontSize"
                        Value="80" />
            </Style.Setters>
        </Style>
        <!--使用继承样式继续修改-->
        <Style x:Key="TextBox2" TargetType="TextBox" BasedOn="{StaticResource TextBox1}">
            <Style.Setters>
                <Setter Property="Text" Value="我是继承后修改的样式"/>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <!--使用全局样式-->
            <TextBox  Style="{ 
        StaticResource TestColor4}" />
            <!--行内样式优先级大于局部样式-->
            <TextBox Text="我是行内样式" Style="{ 
        StaticResource TextBox1}" />
            <!--使用继承后的样式-->
            <TextBox  Style="{ 
        StaticResource TextBox2}" />
            <!--使用用户控件-->
            <local:UserControl1 />
        </StackPanel>

    </Grid>
</Window>

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/qq_44695769/article/details/131494123
おすすめ
ライナスは「ドッグフードを食べる」ことに最も積極的！
Open Source Daily | Winamp プレーヤーがオープンソースになりつつある; 生成 AI の戦いは第 2 ラウンドにエスカレート; AI はバブルの初期段階に入った; Yongming を Alibaba Cloud に導入しますか?
ランキング
C言語プログラミングの最新の方法（第2回）第12章回答（自分で書いた回答、継続的に更新）
フレームワークの蜂のアップロードファイルに移動します
タイトルバーシリーズ：タイトルバーで遭遇したピットを非表示にする
Unityはゲームオブジェクトの様々な状況を取得します
N個の異なるボールは、Mどのように多くの種類のプログラムのと同じ袋に入れられますか？
オブジェクト指向のクラス、オブジェクト21
C ++オブジェクト指向プログラミングの研究ノート（8）
P3954 [NOIP2017 普及组] 成绩
分業のプロセス間通信 - ロック
ハッカーは通常、DOSコマンドウィンドウを使用します
アーカイブ
もっと
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)

コードワールド

© 2018 codetd.com