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

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

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

　　下面进入正题。

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

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

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

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

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

鼠标点最左边尽然也能跳转页面，这什么鬼，改了他的默认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会吸顶。

秒客网

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

相关文章