制作核心界面

来源:互联网 发布:做网站用java 还是php 编辑:程序博客网 时间:2024/06/08 00:01

VS2010

.NET4.0

WPF


新建一个空白项目:Solution2012

添加一个WPF项目:CoreInterface


设置MainWindow窗口属性:

WindowStyle="None"

ResizeMode="NoResize"

 WindowState="Maximized"

新建一个中间置顶的工具栏:

 <Border Name="ToolbarBorder" Background="#96000000" BorderThickness="1,0,1,1" CornerRadius="0,0,8,8" Panel.ZIndex="99" Canvas.Top="-45">            <Canvas Name="Toolbar" Height="50">            </Canvas>            <Border.Triggers>                <EventTrigger RoutedEvent="Border.MouseEnter">                    <BeginStoryboard>                        <Storyboard>                            <DoubleAnimation                                Storyboard.TargetName="ToolbarBorder"                                Storyboard.TargetProperty="(Canvas.Top)"                                To="0" Duration="00:00:0.1"/>                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>                <EventTrigger RoutedEvent="Border.MouseLeave">                    <BeginStoryboard>                        <Storyboard>                            <DoubleAnimation                                Storyboard.TargetName="ToolbarBorder"                                Storyboard.TargetProperty="(Canvas.Top)"                                To="-45" Duration="0:0:0.1"/>                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>            </Border.Triggers>        </Border>

其中包含了一个简单的动画处理部分

 <Border.Triggers>//使用触发器                <EventTrigger RoutedEvent="Border.MouseEnter">//绑定事件                    <BeginStoryboard>                        <Storyboard>                            <DoubleAnimation                                Storyboard.TargetName="ToolbarBorder"                                Storyboard.TargetProperty="(Canvas.Top)"                                To="0" Duration="00:00:0.1"/>                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>                <EventTrigger RoutedEvent="Border.MouseLeave">                    <BeginStoryboard>                        <Storyboard>                            <DoubleAnimation                                Storyboard.TargetName="ToolbarBorder"                                Storyboard.TargetProperty="(Canvas.Top)"                                To="-45" Duration="0:0:0.1"/>                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>            </Border.Triggers>
现在的CS文件:

public MainWindow()        {            InitializeComponent();            double psw = SystemParameters.PrimaryScreenWidth;            ToolbarBorder.Width = psw * .8;            Canvas.SetLeft(ToolbarBorder, psw * .1);            sv.Width = psw * .7;        }

为工具栏添加翻页按钮,修改一下工具栏:

<Border Name="ToolbarBorder" Height="50" Background="#96000000" BorderThickness="1,0,1,1" CornerRadius="0,0,8,8" Panel.ZIndex="99" Canvas.Top="-45">            <DockPanel>                <Button Width="20" Height="40" Margin="20,0,0,0" Click="svPageLeft" Style="{StaticResource svPageStyle}" />                <Button DockPanel.Dock="Right" Width="20" Height="40" Margin="0,0,20,0" Click="svPageRight" Style="{StaticResource svPageStyle}">                    <Button.RenderTransform>                        <RotateTransform Angle="180" CenterX="10" CenterY="20" />                    </Button.RenderTransform>                </Button>                <ScrollViewer Name="sv" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Center" HorizontalScrollBarVisibility="Hidden">                    <StackPanel Name="Toolbar" Loaded="Toolbar_Loaded" Orientation="Horizontal" Height="28" HorizontalAlignment="Center">                        <Button Width="280" Height="28" /><!--放按钮的地方-->                        <Button Width="280" Height="28" />                        <Button Width="280" Height="28" />                        <Button Width="280" Height="28" />                    </StackPanel>                </ScrollViewer>            </DockPanel>            <Border.Triggers>                <EventTrigger RoutedEvent="Border.MouseEnter">                    <BeginStoryboard>                        <Storyboard>                            <DoubleAnimation                                Storyboard.TargetName="ToolbarBorder"                                Storyboard.TargetProperty="(Canvas.Top)"                                To="0" Duration="00:00:0.1"/>                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>                <EventTrigger RoutedEvent="Border.MouseLeave">                    <BeginStoryboard>                        <Storyboard>                            <DoubleAnimation                                Storyboard.TargetName="ToolbarBorder"                                Storyboard.TargetProperty="(Canvas.Top)"                                To="-45" Duration="0:0:0.1"/>                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>            </Border.Triggers>        </Border>
定义按钮的样式svPageStyle:

<Canvas.Resources>            <Style TargetType="Button" x:Key="svPageStyle">                <Setter Property="Template">                    <Setter.Value>                        <ControlTemplate TargetType="Button">                            <Border Name="RootElement" BorderThickness="1" CornerRadius="3">                                <Grid>                                    <Path Data="M 3,20 12,15 12,25 Z">                                        <Path.Fill>                                            <SolidColorBrush x:Name="PathBrush" Color="Gainsboro"/>                                        </Path.Fill>                                    </Path>                                </Grid>                                <VisualStateManager.VisualStateGroups>                                    <VisualStateGroup>                                        <VisualState Name="MouseOver">                                            <Storyboard>                                                <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="#C6000000" Duration="0:0:0.5" />                                                <ColorAnimation Storyboard.TargetName="PathBrush" Storyboard.TargetProperty="Color" To="YellowGreen" Duration="0:0:0.5" />                                            </Storyboard>                                        </VisualState>                                        <VisualState Name="Normal">                                            <Storyboard>                                                <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="#28000000" Duration="0:0:0.8" />                                                <ColorAnimation Storyboard.TargetName="PathBrush" Storyboard.TargetProperty="Color" To="Gainsboro" Duration="0:0:0.8" />                                            </Storyboard>                                        </VisualState>                                    </VisualStateGroup>                                </VisualStateManager.VisualStateGroups>                                <Border.Background>                                    <SolidColorBrush x:Name="BorderBrush" Color="#28000000"/>                                </Border.Background>                            </Border>                        </ControlTemplate>                    </Setter.Value>                </Setter>            </Style>        </Canvas.Resources>

按钮事件:

  private void svPageLeft(object sender, RoutedEventArgs e)        {            sv.PageLeft();        }        private void svPageRight(object sender, RoutedEventArgs e)        {            sv.PageRight();        }

后继->动态加载程序集为工具栏动态添加按钮




原创粉丝点击