WPF 模仿百度首页搜索框

闲来无事,看着百度发呆。

突然想模仿着做一个出来,

挺简单的,实现了简单效果。

image

 

下面就来看看xaml代码,全部代码都在这里了:

<Window x:Class="WPFDemos.MainWindow"
        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:WPFDemos"
        mc:Ignorable="d"
        x:Name="widnow"
        WindowStartupLocation="CenterScreen"
        UseLayoutRounding="True"
        Background="White"
        Title="百度" Height="600" Width="1000">
    <Window.Resources>
        <Style x:Key="borderStyle" TargetType="Border">
            <Setter Property="BorderBrush" Value="#C4C7CE"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="#A7AAB5"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="buttonrStyle" TargetType="Border">
            <Setter Property="Background" Value="#4E6EF2"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#4662D9"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel Background="White" Width="654">
        <Image Source="/Images/bdlogo.png" Width="270" Height="129" Margin="0 0 0 20"
               HorizontalAlignment="Center" VerticalAlignment="Top"></Image>
        <StackPanel Orientation="Horizontal">
            <Border Style="{StaticResource borderStyle}" CornerRadius="8 0 0 8" BorderThickness="2 2 0 2"
                    Width="546" Height="44" ClipToBounds="True" HorizontalAlignment="Left"
                    Background="Transparent">
                <Grid>
                    <TextBox BorderThickness="0" Padding="20 0" HorizontalAlignment="Left" VerticalAlignment="Center" Width="500"/>
                    <Image Source="/Images/camera48.png" Margin="0 0 10 0" Width="32" Height="32" HorizontalAlignment="Right"/>
                </Grid>
            </Border>
            <Border Style="{StaticResource buttonrStyle}" CornerRadius="0 8 8 0" Width="108" >
                <TextBlock Text="百度一下" FontFamily="微软雅黑" FontSize="17" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </StackPanel>
    </StackPanel>
</Window>

最终的效果图:

image

 

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情

    暂无评论内容