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

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

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

　　下面进入正题。

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

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

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

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

<Style x:Key="RemoveHedaderStyle" TargetType="PivotHeaderItem">
        <Setter Property="FontSize" Value="0" />
        <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="0" />
        <Setter Property="Height" Value="0" />
        <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="0"
                         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="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会吸顶。