CPF 入門教程 - 樣式和動畫（三）

CPF NetCore跨平台UI框架

 

系列教程

CPF 入門教程（一）

CPF 入門教程 - 數據綁定和命令綁定（二）

CPF 入門教程 - 樣式和動畫（三）

CPF 入門教程 - 繪圖（四）

CPF 入門教程 - 設計器和模板庫的使用（五） 

CPF 入門教程 - 控件布局（六） 

CPF 入門教程 - 屬性和事件（七） 

CPF 入門教程 - 各個控件介紹（八） 

CPF 入門教程 - 各平台各系統發布說明（九）  

 

用樣式可以對內部元素進行批量設置屬性。

CPF里采用CSS作為樣式描述。為什么用css描述樣式？因為css結構簡單明了。

Xaml和CSS的簡單對比

<Style TagetType="Button">
　　<Setter Property="Background" value="Red"></Setter>
　　......
</Style>

等同於

Button{
　　Background:red;
　　......
}

css明顯比xaml簡潔

 

CPF中的css支持的選擇器

TextBlock { Foreground:rgb(255,0,0);} 選擇所有TextBlock類型的元素，類型不繼承判斷，比如自定義控件繼承Button，那樣式用Button的時候這個自定義控件不會應用該樣式

.test{Foreground:rgb(255,0,0);} 選擇所有包含test 類名的元素，類名通過Classes屬性添加

#test{Foreground:rgb(255,0,0);} 選擇所有Name屬性為test的元素

[IsMouseOver=true]{…}   添加觸發器

Button TextBlock{…}   Button里的后代為TextBlock的元素，

Button>TextBlock{…}   Button直接子元素為TextBlock的元素，

 

自定義類型要支持css設置，需要實現string的隱式轉換，同時重寫ToString，使格式一致

        public static implicit operator 自定義對象(string n)
        {
            return Parse(n);//自己寫字符串解析和創建自定義對象
        }

 

屬性名里加-用來設置子屬性，支持設置索引的子對象的屬性，不支持無限設置子屬性，只能 屬性名-屬性名、屬性名-數字索引-屬性名

#testGrid {

    ColumnDefinitions-0-Width: "20";  設置Grid的第一列的寬度為20

}

 

在窗體里調用   LoadStyleFile("res://ConsoleApp1/Stylesheet1.css"); 加載樣式文件，一般樣式文件內嵌，內嵌文件用res://開頭訪問

 

定義一個按鈕樣式

Button {
    BorderFill: #DCDFE6;
    IsAntiAlias: True;
    CornerRadius: 4,4,4,4;
    Background: #FFFFFF;
}

    Button[IsMouseOver=true] {
        BorderFill: rgb(198,226,255);
        Background: rgb(236,245,255);
        Foreground: rgb(64,158,255);
    }

    Button[IsPressed=true] {
        BorderFill: rgb(58,142,230);
    }

運行效果

 

定義下拉框動態展開效果

@keyframes comboboxDropDown {
    0% {
        RenderTransform: scale(1,0.1);
    }

    100% {
        RenderTransform: scale(1,1);
    }
}

#DropDownPanel {
    RenderTransformOrigin: 50%,0;
}

#DropDownPopup[Visibility=Visible] #DropDownPanel {
    animation-name: comboboxDropDown;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

 

css里定義的動畫，暫時不支持緩動效果，比如加速，減速，回彈等等

 

C#里使用動畫

 

            RenderTransformOrigin = "100%,0";
            RenderTransform = new GeneralTransform { ScaleX = 0.1f };
            this.TransitionValue(a => a.RenderTransform, new GeneralTransform { ScaleX = 1 }, TimeSpan.FromSeconds(0.1f));

一般簡單的動畫直接使用TransitionValue方法就行，對某個屬性過渡到某個值

 

如果要做復雜的動畫，就需要用Storyboard，Timelines里可以添加動畫播放流程，可以分成多段，流程值是0-1，意思就是這次的結束時間，開始是上一段的結束，最后一個必須是1，里面可以加不同KeyFrames ，定義不同屬性的變換

 

             var storyboard = new Storyboard
                {
                    Timelines =
                    {
                        new Timeline(1)
                        {
                            KeyFrames =
                            {
                                new KeyFrame<SolidColorFill>{ Property=nameof(Control.Background), Value="0,0,0,100" }
                            }
                        }
                    }
                };
            }
            storyboard.Start(mask, TimeSpan.FromSeconds(0.3), 1, EndBehavior.Reservations);