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

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

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

　　下面进入正题。

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

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

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

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

 <Style x:Key="RemoveHedaderStyle" TargetType="PivotHeaderItem">
         <Setter Property="FontSize" Value="" />
         <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
         <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
         <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
         <Setter Property="Padding" Value="" />
         <Setter Property="Height" Value="" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="IsTabStop" Value="False" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="PivotHeaderItem">
                     <Grid x:Name="Grid" Background="{TemplateBinding Background}">

                         <ContentPresenter x:Name="ContentPresenter"
                                         Content="{TemplateBinding Content}"
                                         ContentTemplate="{TemplateBinding ContentTemplate}"
                                         Margin="{TemplateBinding Padding}"
                                         FontSize="{TemplateBinding FontSize}"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontWeight="{TemplateBinding FontWeight}"
                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <ContentPresenter.RenderTransform>
                                 <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                             </ContentPresenter.RenderTransform>
                         </ContentPresenter>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

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

Canvas.ZIndex="5"

我用listbox替代了pivot的Header。

 <ListBox Name="LabelListBox"
                          Grid.Row=""
                          Foreground="{ThemeResource ListBoxUnSelectedForegroundBrush}"
                          Background="{ThemeResource ListBoxBackgroundBrush}"
                          SelectedIndex="{Binding ElementName=MainPivot,
                                                      Path=SelectedIndex,
                                                      Mode=TwoWay}"
                          ItemContainerStyle="{Binding Source={ThemeResource ListBoxItemStyle}}" >

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

 SelectedIndex="{Binding ElementName=MainPivot,
                                                      Path=SelectedIndex,
                                                      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="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>-->
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <!--<Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>-->
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPressed">
                                    <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource ListBoxPointerOverBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

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

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

<ListBox Name="ValueTypeListBox"
                                     Margin="0,0,0,5"
                                     Grid.Column=""
                                     Grid.RowSpan=""
                                     SelectedIndex=""
                                     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=""/>
                                    </ListBoxItem.RenderTransform>
                                    <TextBlock Name="IncomeTextBlock"
                                               Text="收入" RenderTransformOrigin="0.5,0.5">
                                        <TextBlock.RenderTransform>
                                            <CompositeTransform Rotation=""/>
                                        </TextBlock.RenderTransform>
                                    </TextBlock>
                                </ListBoxItem>
                            </ListBox>

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