AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2018-03-16 1445
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:[UWP小白日记-3]记账项目-1　　学了一段时间的UWP，来个项目试试手。 　　本来是想边做边学MVVMLight的结果感觉MVVM对于萌新来说太高难，以后再把这个项目改造成MVVMLight框架的项目。
原文: [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>
View Code

最后没招，想到把这个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
View Code

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

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

最后就是改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>
View Code

 收入和支出那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>
View Code

 

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

 

文章标签：
前端开发
杰克.陈
目录
相关文章
愿天堂没有BUG（公众号同名）
|
架构师 Java 大数据
美团特供IDEA入门实战笔记CSDN显踪，竟无良程序员白嫖后举报下架
《IntelliJ IDEA入门与实战》蕴含的知识体系甚广。 主要基于IntelliJ IDEA官方文档以及作者实际工作经验为广大读者深入挖掘IDEA不为人知的功能。 是一本理论和实践相结合的图书，将非常完善地介绍IntelliJ IDEA所涵盖的方方面面的知识，并通过大量生动形象的图片以及实战案例加深读者对IntelliJ IDEA的理解，相信读者必会受益匪浅。
愿天堂没有BUG（公众号同名）
103 0
Bug哆哆
|
前端开发
博客系统开发日记
2.如何去除Bootstarp栅格系统默认的15px的padding：https://blog.csdn.net/TsuiXh/article/details/93891357
Bug哆哆
89 0
陶然同学
|
存储 分布式计算 NoSQL
【探花交友】day01—项目介绍与环境搭建（二）
【探花交友】day01—项目介绍与环境搭建（二）
陶然同学
135 0
陶然同学
【探花交友】day01—项目介绍与环境搭建（四）
【探花交友】day01—项目介绍与环境搭建（四）
陶然同学
84 0
陶然同学
|
搜索推荐 算法 大数据
【探花交友】day01—项目介绍与环境搭建（一）
【探花交友】day01—项目介绍与环境搭建
陶然同学
185 0
陶然同学
|
JSON 前端开发 安全
【探花交友】day01—项目介绍与环境搭建（六）
【探花交友】day01—项目介绍与环境搭建（六）
陶然同学
144 0
陶然同学
|
Web App开发 Dubbo NoSQL
【探花交友】day01—项目介绍与环境搭建（三）
【探花交友】day01—项目介绍与环境搭建（三）
陶然同学
252 0
陶然同学
|
云安全 安全 Java
【探花交友】day01—项目介绍与环境搭建（五）
【探花交友】day01—项目介绍与环境搭建（五）
陶然同学
152 0
陶然同学
|
存储 NoSQL API
【探花交友】day04—圈子功能实现（二）
【探花交友】day04—圈子功能实现（二）
陶然同学
139 0
漏刻有时
|
JSON 前端开发 数据可视化
精品课程申报系统实战开发代码全纪录
精品课程申报系统实战开发代码全纪录
漏刻有时
79 0

热门文章

最新文章

  • 1
    Object reference not set to an instance of an object.
  • 2
    Map根据键、值进行排序
  • 3
    锐捷网络&视易K米，携手助力2016腾讯全球合作伙伴万人大会
  • 4
    Java中的定时器
  • 5
    Python正则表达式指南下下半部　
  • 6
    VirtualDesktop多媒体在何处解码?
  • 7
    文件移动脚本
  • 8
    xml在此生活
  • 9
    在不动用sp_configure的情况下，如何 =》去掉列的自增长，并保留原数据
  • 10
    聚焦技术实战！MDCC 2016 移动开发者大会盛大开幕
  • 1
    2024Mysql And Redis基础与进阶操作系列（6）作者——LJS[含MySQL 多表之一对一/多；多对多；多表联合查询等详解步骤及常见报错问题所对应的解决方法]
    32
  • 2
    猫头虎分享：鸿蒙生态带给开发者的全新机遇！轻松实现按需加载与多端适配，开发效率翻倍
    30
  • 3
    2024Mysql And Redis基础与进阶操作系列（5）作者——LJS[含MySQL DQL基本查询:select；简单、排序、分组、聚合、分组、分页等详解步骤及常见报错问题所对应的解决方法]
    25
  • 4
    理解 ES6 中的 Promise
    26
  • 5
    CSS 提高性能的方法
    23
  • 6
    CSS 预编语言的区别
    10
  • 7
    如何快速掌握 CSS 预编语言
    10
  • 8
    对 CSS 预编语言的理解
    12
  • 9
    利用缓存布局信息来减少回流和重绘的发生
    11
  • 10
    减少回流和重绘的发生
    12

    • 相关课程

    更多
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定
  • 面向运维的 python 脚本速成-1024程序员节创造营公益课
  • 4天Docker 实战-1024程序员节创造营公益课
  • 场景实践- 新手玩转云计算-创建炫酷的简历网页
  • 深入浅出白话Serverless-1024程序员节创造营公益课

    • 相关电子书

    更多
  • 小程序开发不求人电子书
  • IOS开发者必读资讯
  • 《 IOS开发者必读资讯》

    • 相关实验场景

    更多
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 收银台的场景化界面实践
  • 重温童年的“五子棋”，赢取专属阿里云Serverless证书
  • 小试牛刀，一键部署电商商城
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月