WPF學習(11)-樣式和行為
阿新 • • 發佈:2018-12-13
樣式就和html的css一樣,是為了複用,不用每次都去寫標記,而行為就如JS一樣,定義好一個行為,每次直接呼叫就好,這樣就做到了耦合不是那麼高。比如,我們定義一個樣式,樣式寫在頁面,當然這樣肯定不好,因為別的頁面就沒有辦法複用這個樣式了。
<Button Style="{StaticResource mystyle}" Content="Button" HorizontalAlignment="Left" Margin="182,112,0,0" VerticalAlignment="Top" Width="75"/> <Button Style="{StaticResource mystyle}" Content="Button" HorizontalAlignment="Left" Margin="182,56,0,0" VerticalAlignment="Top" Width="75"/> <Button Style="{StaticResource mystyle}" Content="Button" HorizontalAlignment="Left" Margin="182,182,0,0" VerticalAlignment="Top" Width="75"/>
這三個按鈕的樣式都是mystyle,我們不需要寫多次,直接一次就可以了。樣式就放在資源裡面,上一節已經學到了什麼是資源。
<Grid.Resources> <Style x:Key="mystyle" TargetType="Button"> <Setter Property="Background" Value="red"></Setter> <Style.Triggers > <Trigger Property="Button.IsMouseOver" Value="true"> <Setter Property="Foreground" Value="Yellow"></Setter> </Trigger> <Trigger Property="Button.IsMouseOver" Value="false"> <Setter Property="Background" Value="Pink"></Setter> </Trigger> </Style.Triggers> </Style> </Grid.Resources>
樣式其實更多的應該是由前端工程師來完成,但是.NET框架下的程式設計師,你懂的,啥都要自己搞,所以咱們就自己來弄吧。
而行為,則是對外觀的進一步封裝,比如我們有一個圖片,圖片要做到拖動,如果用事件監聽,比如按鈕按下,然後按鈕移動,按鈕提起,不斷地處理,當然是沒有問題,但是,如果再放一個圖片,這個圖片也要實現這個功能呢?那就很麻煩了,最簡單的方法就是直接在Blend裡面,在資產條目下有個行為,直接把MouseDragElementBehavior拖到我們的控制元件上面就行了。
接著,我們自定義一個圖片可以縮放的功能,就採用行為來做。先定義屬於咱們自己的行為類
class MyBehavior : Behavior<UIElement>
{
private Grid b_grid;
ScaleTransform sfr = new ScaleTransform();
protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.MouseWheel += AssociatedObjectOnMouseWheel;
}
protected override void OnDetaching()
{
base.OnDetaching();
AssociatedObject.MouseWheel -= AssociatedObjectOnMouseWheel;
}
private void AssociatedObjectOnMouseWheel(object sender, MouseWheelEventArgs mouseWheelEventArgs)
{
Point centerPoint = mouseWheelEventArgs.GetPosition(AssociatedObject);
sfr.CenterX = centerPoint.X / 2;
sfr.CenterY = centerPoint.Y / 2;
sfr.ScaleX += (double)mouseWheelEventArgs.Delta / 1200;
sfr.ScaleY += (double)mouseWheelEventArgs.Delta / 1200;
AssociatedObject.RenderTransform = sfr;
AssociatedObject.CaptureMouse();
}
}
然後在前臺直接呼叫 ,效果就出來啦。
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="WpfApplication9.MainWindow"
xmlns:local="clr-namespace:WpfApplication9"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Image Margin="43,82,307.667,97.667" Source="Images\Alarm.png">
<i:Interaction.Behaviors>
<ei:MouseDragElementBehavior/>
<local:MyBehavior/>
</i:Interaction.Behaviors>
</Image>
<Image Margin="251,82,99.667,97.667" Source="Images/Alarm.png">
<i:Interaction.Behaviors>
<ei:MouseDragElementBehavior/>
<local:MyBehavior/>
</i:Interaction.Behaviors>
</Image>
</Grid>
</Window>
效果如下,不管是有多少控制元件,也不管這個控制元件是不是圖片,比如我們再放一個按鈕,讓按鈕具有拖動的行為,也是完全一樣的。只需要放一個按鈕,新增行為就行了。
<Button Content="Button" HorizontalAlignment="Left" Margin="178,245,0,0" VerticalAlignment="Top" Width="75">
<i:Interaction.Behaviors>
<local:MyBehavior/>
</i:Interaction.Behaviors>
</Button>