[运气修仙]系列WPF界面设计分享之钱包界面,仿的企鹅钱包
[运气修仙]是本人原创吾爱的一款修仙挂机类小程序成品发布在原创区https://www.52pojie.cn/thread-1741466-1-1.html
此为其中的一个界面代码,代码中有引用图片和icon字符的,你自己改成你的就可以.其中的事件代码也可以完全删除.
本次分享为初创界面,最终设计以上线为准.
本代码,您可以随意复制,修改并且不用通知我.
效果图
上源码
<Window x:Class="YunQi.views.Wallet"
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:YunQi.views"
mc:Ignorable="d"
Title="Wallet" Height="535" Width="738"
WindowStartupLocation="CenterScreen"
WindowStyle="None"
AllowsTransparency="True"Topmost="True"
Background="Transparent"
ResizeMode="NoResize">
<Window.Resources>
<GeometryGroup x:Key="clipGeometry" FillRule="Nonzero">
<EllipseGeometry RadiusX="45" RadiusY="45" Center="45, 45"></EllipseGeometry>
</GeometryGroup>
<Style TargetType="{x:Type TextBox}" x:Key="LineTextBox">
<Setter Property="FontSize" Value="14"/>
<Setter Property="BorderBrush" Value="#007Add"/>
<Setter Property="BorderThickness" Value="0 0 0 1"/>
<Setter Property="CaretBrush" Value="White"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Grid>
<Border x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<TextBlock IsHitTestVisible="False"
Text="{TemplateBinding Tag}"
x:Name="placeholder"
FontFamily="{TemplateBinding FontFamily}"
Padding="{TemplateBinding Padding}"
VerticalAlignment="Center"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Foreground="Gray"
>
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}" Value="">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid Margin="10" Background="#FF757272">
<Rectangle
RadiusX="5" RadiusY="5"
Fill="white">
<!--Fill="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"-->
<Rectangle.Effect>
<DropShadowEffect BlurRadius="8" ShadowDepth="0" Opacity="0.4"/>
</Rectangle.Effect>
</Rectangle>
<Border CornerRadius="5">
<ContentPresenter />
</Border>
</Grid>
<Grid Margin="10" Background="#FFFDFDFD">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="15"/>
<RowDefinition Height="160"/>
<RowDefinition Height="140"/>
<RowDefinition Height="35"/>
<RowDefinition Height="140"/>
<RowDefinition Height="0*"/>
<RowDefinition Height="3"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<BorderCornerRadius="1" MouseDown="Border_MouseDown" Grid.ColumnSpan="7">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0" MappingMode="RelativeToBoundingBox">
<GradientStop Color="White"/>
<GradientStop Color="#FF15A7DE" Offset="0.227"/>
<GradientStop Color="#FF12B7F5"/>
<GradientStop Color="#FF12AFEA" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBlock Text="" FontFamily="{StaticResource icoFont}"HorizontalAlignment="Left" Grid.Column="1"FontSize="16" Foreground="white" VerticalAlignment="Center"/>
<TextBlock Text="我的钱包" Grid.Column="2" VerticalAlignment="Center"Foreground="white"FontSize="12" />
<Button x:Name="btn_close" ToolTip="关闭" Content=""FontFamily="{StaticResource icoFont}" Grid.Column="5" Style="{StaticResource btn_close}" Click="btn_close_Click" BorderBrush="{x:Null}"Foreground="white"FontSize="20" />
</Grid>
</Border>
<Border CornerRadius="0 0 0 1"MouseDown="Border_MouseDown" Background="#FFF0F0F0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"Grid.RowSpan="7"/>
<StackPanel Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center" Width="90" >
<Image x:Name="img_avatar" Source="/res/win_ico/avator.png"Clip="{StaticResource ResourceKey=clipGeometry}" Height="90" Width="90" Margin="0,14,0,0"/>
<TextBlock Text="..."Foreground="#FF8C8888" HorizontalAlignment="Center" Margin="0,6,0,0"/>
<TextBlock Text="欢迎使用钱包" HorizontalAlignment="Center" Foreground="#FF8C8888" Margin="0,3,0,0"/>
</StackPanel>
<StackPanel Grid.Row="3" Grid.Column="1" HorizontalAlignment="Center" Width="134" >
<Button BorderBrush="{x:Null}" Background="{x:Null}">
<Button.Content>
<Border Background="white" CornerRadius="2"Width="135" Height="30" Margin="-6,0,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Text="" FontFamily="{StaticResource icoFont}" FontSize="18" Foreground="#FF66A1ED" Margin="0,0,7,0" />
<TextBlock Text="请勿使用简单密码" Foreground="#FF408DF1"/>
</StackPanel>
</Border>
</Button.Content>
</Button>
</StackPanel>
<StackPanel Grid.Row="5" Grid.Column="1" HorizontalAlignment="Center" Width="134" VerticalAlignment="Bottom" Margin="0,0,0,27" >
<TextBlock Text="" FontFamily="{StaticResource icoFont}" Foreground="#FFA2A0A0" FontSize="34" HorizontalAlignment="Center"/>
<TextBlock Text="装饰码" FontFamily="{StaticResource icoFont}" Foreground="#FFA2A0A0" FontSize="14" HorizontalAlignment="Center"/>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="3" VerticalAlignment="Bottom" >
<TextBlock Text="仙玉(个)" Foreground="#FF5D5757" FontSize="14"/>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/res/mainPage/xianyu.png" Width="40" Height="40" />
<TextBlock Text="30.00" FontSize="48" FontFamily="Bahnschrift" Margin="9,2,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,55,0,7" >
<Border Background="#FF1969D2" Width="4" CornerRadius="2"/>
<TextBlock Text="活动兑换" Margin="8,0,0,0" FontSize="14" Foreground="#FF444444"/>
</StackPanel>
</StackPanel>
<StackPanelGrid.Row="2" Grid.Column="5" Grid.RowSpan="2" VerticalAlignment="Center">
<StackPanelGrid.Row="4" Grid.Column="5" Orientation="Horizontal" Margin="0,5,0,7" >
<Border Background="#FF8C8888" Width="4" CornerRadius="2"/>
<TextBlock Text="仙玉流水" Margin="8,0,0,0" FontSize="14" Foreground="#FF444444" VerticalAlignment="Center"/>
<Button Content="查看" Style="{StaticResource MyButton}" Margin="125,0,0,0" Foreground="#FFA5A3A3" Width="40"/>
</StackPanel>
<StackPanel Background="AliceBlue" Height="240">
</StackPanel>
</StackPanel>
<BorderGrid.Row="3" Grid.Column="3" VerticalAlignment="Center" BorderBrush="#FFE8E8E8" BorderThickness="1,1,1,1">
<StackPanel >
<TextBox x:Name="box_buyprice" Tag="在此输入兑换码" Style="{StaticResource LineTextBox}" Width="220" Height="25" Margin="0,15,0,2" HorizontalAlignment="Center" />
<Button Content="确认兑换" Width="80" Height="30" Margin="0,13,0,8" />
</StackPanel>
</Border>
<StackPanelGrid.Row="4" Grid.Column="3" Orientation="Horizontal" Margin="0,5,0,7" >
<Border Background="#FF1969D2" Width="4" CornerRadius="2"/>
<TextBlock Text="分享仙玉给朋友" Margin="8,0,0,0" FontSize="14" Foreground="#FF444444" VerticalAlignment="Center"/>
</StackPanel>
<BorderGrid.Row="5" Grid.Column="3" VerticalAlignment="Center" BorderBrush="#FFE8E8E8" BorderThickness="1,1,1,1">
<StackPanel >
<TextBlock Text="还可分享个"FontSize="14" Foreground="#FF444444" HorizontalAlignment="Center" Margin="5,5,0,0" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="输入数量"VerticalAlignment="Center" Margin="5,0,0,0" />
<TextBox x:Name="box_buypr" Tag="输入10的倍数" Style="{StaticResource LineTextBox}" Width="120" Height="25" HorizontalAlignment="Center" Margin="10,0,0,0" />
<Button Content="生成兑换码" Width="80" Height="30" Margin="20,0,0,0" />
</StackPanel>
<TextBox x:Name="box_buyvr" Tag="兑换码" Style="{StaticResource LineTextBox}" Width="280" Height="25" HorizontalAlignment="Center" Margin="0,10,0,0" />
</StackPanel>
</Border>
<StackPanelGrid.Row="4" Grid.Column="5" Orientation="Horizontal" Margin="0,5,0,7" >
<Border Background="#FF8C8888" Width="4" CornerRadius="2"/>
<TextBlock Text="我的兑换码" Margin="8,0,0,0" FontSize="14" Foreground="#FF444444" VerticalAlignment="Center"/>
<Button Content="查看" Style="{StaticResource MyButton}" Margin="115,0,0,0" Foreground="#FFA5A3A3"Width="40"/>
</StackPanel>
</Grid>
</Grid>
</Window>
谢谢分享 快给我来个无限血包 有点意思 怎么架设，有教程吗，额还有一个服务器空闲着
谢谢分享! m0716273254 发表于 2023-3-3 18:10
怎么架设，有教程吗，额还有一个服务器空闲着
懂代码的,应该可以看懂,都是现成的api,调用就好. 搞个安卓版的吧，摸鱼方便{:301_992:} 修仙加个等级，法力无边
页:
[1]