[运气修仙]系列WPF界面设计分享之钱包界面,仿的企鹅钱包

kololi · 发表于 2023-3-3 15:02

[运气修仙]是本人原创吾爱的一款修仙挂机类小程序成品发布在原创区
https://www.52pojie.cn/thread-1741466-1-1.html

此为其中的一个界面代码,代码中有引用图片和icon字符的,你自己改成你的就可以. 其中的事件代码也可以完全删除.

本次分享为初创界面,最终设计以上线为准.

本代码,您可以随意复制,修改并且不用通知我.

效果图

上源码

[C#] 纯文本查看 复制代码

<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>
            <Border  CornerRadius="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="&#xe600;" 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="&#xeaf2;"  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="&#xe63a;" 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="&#xe610;" 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>
            <StackPanel  Grid.Row="2" Grid.Column="5" Grid.RowSpan="2"   VerticalAlignment="Center">
                <StackPanel  Grid.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>
            <Border  Grid.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>
            <StackPanel  Grid.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>
            <Border  Grid.Row="5" Grid.Column="3" VerticalAlignment="Center" BorderBrush="#FFE8E8E8" BorderThickness="1,1,1,1">
                <StackPanel >
                    <TextBlock Text="还可分享[30]个"  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>

            <StackPanel  Grid.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>

4899 · 发表于 2023-3-3 15:19

谢谢分享

feiwei · 发表于 2023-3-3 15:28

快给我来个无限血包

啭裑 · 发表于 2023-3-3 16:13

有点意思

m0716273254 · 发表于 2023-3-3 18:10

怎么架设，有教程吗，额还有一个服务器空闲着

NINE09 · 发表于 2023-3-7 11:46

谢谢分享!

kololi · 发表于 2023-3-7 20:45

m0716273254 发表于 2023-3-3 18:10
怎么架设，有教程吗，额还有一个服务器空闲着

懂代码的,应该可以看懂,都是现成的api,调用就好.

小郎君心痒难耐 · 发表于 2023-4-2 08:35

搞个安卓版的吧，摸鱼方便

541 · 发表于 2023-4-24 15:48

修仙加个等级，法力无边

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] [运气修仙]系列WPF界面设计分享之钱包界面,仿的企鹅钱包

本帖被以下淘专辑推荐:

个人中心