WPF学习（11）-样式和行为

样式就和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>

WPF学习（11）-样式和行为

猜你喜欢