[UWP小白日记-3]记账项目-1

　　学了一段时间的UWP，来个项目试试手。

　　本来是想边做边学MVVMLight的结果感觉MVVM对于萌新来说太高难，以后再把这个项目改造成MVVMLight框架的项目。

　　下面进入正题。

中间那快空白打算放gridview，用来放标签。利用DataTemplate读取数据库里的标签表。

头部标题和底部标签没什么好说的，主要说下那个pivot的实现。

先来看看图，就知道有什么问题了，然后在解决这个问题。

鼠标点最左边尽然也能跳转页面，这什么鬼，改了他的默认Styel一样不行。

 1 <Style x:Key="RemoveHedaderStyle" TargetType="PivotHeaderItem">
 2         <Setter Property="FontSize" Value="0" />
 3         <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
 4         <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
 5         <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
 6         <Setter Property="Background" Value="Transparent" />
 7         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
 8         <Setter Property="Padding" Value="0" />
 9         <Setter Property="Height" Value="0" />
10         <Setter Property="VerticalContentAlignment" Value="Center" />
11         <Setter Property="IsTabStop" Value="False" />
12         <Setter Property="Template">
13             <Setter.Value>
14                 <ControlTemplate TargetType="PivotHeaderItem">
15                     <Grid x:Name="Grid" Background="{TemplateBinding Background}">
16
17                         <ContentPresenter x:Name="ContentPresenter"
18                                         Content="{TemplateBinding Content}"
19                                         ContentTemplate="{TemplateBinding ContentTemplate}"
20                                         Margin="{TemplateBinding Padding}"
21                                         FontSize="{TemplateBinding FontSize}"
22                                         FontFamily="{TemplateBinding FontFamily}"
23                                         FontWeight="{TemplateBinding FontWeight}"
24                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
25                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
26                             <ContentPresenter.RenderTransform>
27                                 <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
28                             </ContentPresenter.RenderTransform>
29                         </ContentPresenter>
30                     </Grid>
31                 </ControlTemplate>
32             </Setter.Value>
33         </Setter>
34     </Style>

最后没招，想到把这个listbox外层的Grid的ZIndex改大来覆盖

Canvas.ZIndex="5"

我用listbox替代了pivot的Header。

 1 <ListBox Name="LabelListBox"
 2                          Grid.Row="0"
 3                          Foreground="{ThemeResource ListBoxUnSelectedForegroundBrush}"
 4                          Background="{ThemeResource ListBoxBackgroundBrush}"
 5                          SelectedIndex="{Binding ElementName=MainPivot,
 6                                                      Path=SelectedIndex,
 7                                                      Mode=TwoWay}"
 8                          ItemContainerStyle="{Binding Source={ThemeResource ListBoxItemStyle}}" >
 9
10

利用绑定来实现跳转，这样不用写任何cs代码。

1 SelectedIndex="{Binding ElementName=MainPivot,
2                                                      Path=SelectedIndex,
3                                                      Mode=TwoWay}"

最后就是改listbox的styel

主要就是这几个没有注释的视觉状态

<VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />

                                <VisualState x:Name="PointerOver">
                                    <!--<Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>-->
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <!--<Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>-->
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPressed">
                                    <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

收入和支出那2个按钮也是用listbox实现的：

收入那个按钮加了旋转变换

<ListBox Name="ValueTypeListBox"
                                     Margin="0,0,0,5"
                                     Grid.Column="1"
                                     Grid.RowSpan="2"
                                     SelectedIndex="0"
                                     Foreground="{ThemeResource ListBoxUnSelectedForegroundBrush}"
                                     Background="Transparent"
                                     ItemContainerStyle="{Binding Source={ThemeResource RadioButtonStyle}}">
                                <ListBoxItem>
                                    <TextBlock Name="SpendingTextBlock"
                                               Text="支出"/>
                                </ListBoxItem>
                                <ListBoxItem RenderTransformOrigin="0.5,0.5"
                                             Margin="0,2,0,0">
                                    <ListBoxItem.RenderTransform>
                                        <CompositeTransform Rotation="180"/>
                                    </ListBoxItem.RenderTransform>
                                    <TextBlock Name="IncomeTextBlock"
                                               Text="收入" RenderTransformOrigin="0.5,0.5">
                                        <TextBlock.RenderTransform>
                                            <CompositeTransform Rotation="180"/>
                                        </TextBlock.RenderTransform>
                                    </TextBlock>
                                </ListBoxItem>
                            </ListBox>

这个页面差不多了，下篇打算实现报销页的功能，初步打算使用listview的GroupStyle来实现，上下滚动的时候Group会吸顶。

时间： 2024-10-19 09:47:54

[UWP小白日记-3]记账项目-1的相关文章

[UWP小白日记-4]记账项目-2

手机端: 待续…… 哈哈这个代码真是好长时间啊,没办法萌新你们都懂的,UI是改了又改,知识也在慢慢积累, 所以这效率就低下了点 UI是改了又改,代码是不断了改,所以搞到现在都没开发完成

[UWP小白日记-11]在UWP中使用Entity Framework Core（Entity Framework 7）操作SQLite数据库(一)

前言本文中,您将创建一个通用应用程序(UWP),使用Entity Framework Core(Entity Framework 7)框架在SQLite数据库上执行基本的数据访问. 准备: Entity Framework Core(Entity Framework 7)下文将简称:EF 1.在UWP中使用EF需要更新Microsoft.NETCore.UniversalWindowsPlatform到大于“5.2.2”的版本. 2.直接在“程序包管理器控制台”输入命令来更新:Update-P

[UWP小白日记-7]转换MVA学院的XML字幕为SRT （二）

瞎扯淡上个版本,非常蠢用来N多的循环导致非常卡性能烂得不行,这次使用XmlDocument类来读取XML字幕其实根本不用各种扒XML字幕,好吧我这是学习使用XmlDocument类,嗯就是这个样子的.(⊙﹏⊙)b , 正文其实这个小程序,关键就是读取文件的时候要正确的转码,应为系统TXT文本默认使用的是ANIS编码,而XmlDocument使用的是UTF8. 不转码妥妥的乱码. 先来看下成品,最后我会打包为APP供大家使用的.(GIF录制工具ScreenToGif,开源并且使用的是WPF开

[UWP小白日记-2]SQLite数据库DOME

数据库说简单点就是增删改查,但是对新手来说也是要爆肝的.作为一个新手爆肝无数次啊, 血的教训啊现在UWP的教程又少,说多了都是泪.留下来免得以后又爆肝.还有:一定要写注释!一定要写注释!一定要写注释! 重要的事情说三遍! 1.首先,准备工作: 1)引用: 获取途径:VS里的扩展和更新.NuGet等. 2)数据库模型: 1 internal class ACCOURT 2 { 3 public ACCOURT() { } //空构造函数 4 public ACCOURT(int ID,double

[UWP小白日记-15]在UWP手机端实时限制Textbox的输入

说实话重来没想到验证输入是如此的苦逼的一件事情. 网上好多验证都是在输入完成后再验证,我的想法是在输入的时候就限制输入,这样我就不用再写代码来验证了应为是手机端,所以不用判断其他非法字符,直接把Textbox的属性InputScope设置为"Number"就是了,反正在目前版本的UWP中纯数字键盘还无法切换到其他的字符键盘去下面的代码是一个金额文本框的验证,算是抛砖引玉吧.欢迎还有更好的方案指点! 直接上代码: /// <summary> /// 检查输入金额,当检测到

[UWP小白日记-1]判断APP是否是第一次运行初始化SQLITE数据库

利用应用程序设置来实现此功能. 1.首先,获取APP设置的容器: ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings; 由于获取容器的时候并没有给key为FirestStart的赋值,所以下面就直接判断是不是为null,为null就是第一次运行APP, 然后在else里给key为FirestStart的赋值,那么else的代码就只能执行一次了.当然以后在UI上可以添加一个switchButt

[UWP小白日记-14]正则表达式

匹配浮点数: ^(([1-9]+[0-9]*.{1}[0-9]+)|([0].{1}[1-9]+[0-9]*)|([1-9][0-9]*)|([0][.][0-9]+[1-9]*))$ 匹配2位浮点数:^(([1-9]+[0-9]*.{1}[0-9]{1,2})|([0].{1}[1-9]+[0-9]{1,2})|([1-9][0-9]{1,2})|([0][.][0-9]+[1-9]{1,2}))$ 来自为知笔记(Wiz)

小白日记6：kali渗透测试之被动信息收集（五）-Recon-ng

Recon-ng Recon-NG是由python编写的一个开源的Web侦查(信息收集)框架.Recon-ng框架是一个全特性的工具,使用它可以自动的收集信息和网络侦查.其命令格式与Metasploit!默认集成数据库,可把查询结果结构化存储在其中,有报告模块,把结果导出为报告. 点击打开链接 1.启动Recon-NG框架 [recon-ng][default] >提示符表示启动成功 <span style="font-size:18px;">[email prote