2019-9-2-win10-uwp-兴趣线

title	author	date	CreateTime	categories
win10 uwp 兴趣线	lindexi	2019-09-02 12:57:38 +0800	2018-2-13 17:23:3 +0800	Win10 UWP

本文讲的是如何去做一个时间轴样子的东西但我们放的不一定是时间，可能是我们的时间。我把它放在我的CSDN阅读，我的界面做出来很差，但是应该读者能做出很漂亮的。

行间距

我们在ViewModel写一个ObservableCollection，我把它名字叫Str，因为这个是随意的，我们不需要给他他值。

然后在我们的界面，用ListView。

要我们的ListView的Item有和ListView一样的宽度可以简单设置ItemContainerStyle

                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalContentAlignment"
                                        Value="Stretch" />
                            </Style>
                        </ListView.ItemContainerStyle>

这时，我们在我们的模板写Grid的背景为black

           <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Black">
                        <TextBlock Text="123"></TextBlock>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>

可以看到行间隔，UWP行间距其实是我们没有设置垂直，因为开始是Center

我们可以使用设置他和宽度一样，其实这里我说错，是水平布局

                    <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>

全部代码

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView ItemsSource="{x:Bind View.Str}">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment"
                                        Value="Stretch" />
                    <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </ListView.ItemContainerStyle>
            
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Black">
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

兴趣线

我要想说下兴趣线是什么，这个很多人叫时间轴，UWP时间轴的做法其实就是一个ListView。

这是我的CSDN博客阅读，虽然界面做的很渣，但是我想说这个左边的线就是我们要做的。

大家可以看到左边的，其实就是两条线和两个圆。

我们先用Rectangle来画我们第一个线，我们需要他就在中间

HorizontalAlignment="Center"

放在一个Grid的中间就是我们设置水平为center

然后我们在右边放一个Rectangle，如何在Grid放的是一半，我们可以在Grid放一个Grid，使用ColumnDefinitions水平把Grid分左右

<Grid.ColumnDefinitions>
             <ColumnDefinition></ColumnDefinition>
             <ColumnDefinition></ColumnDefinition>
 </Grid.ColumnDefinitions>

然后把Rectangle放在右边，注意要设置他的高度和宽度

<Rectangle Grid.Column="1"/>

开始设计我们不知道宽度和高度的值，每次修改都需要改好多个，那么我们如何就修改一个？我们可以使用常亮，也就是我们的Resource

                        <ListView.Resources>
                            <!--<x:Double x:Key="LeftListWidth">100</x:Double>-->
                            <GridLength x:Key="LeftListWidth" >100</GridLength>
                            <x:Double x:Key="RectangleWidth">6</x:Double>
                            <SolidColorBrush x:Key="RectangleColor" Color="#FFDA3E3E"></SolidColorBrush>
                            <!--<SolidColorBrush x:Key="VerticalRectangleColor"  ></SolidColorBrush>-->
                            <x:Double x:Key="EllipseWidth">30</x:Double>
                        </ListView.Resources>

我首先是定义了左边的宽度，也就是放圆圈的那个Grid宽度，然后定义Rectangle的宽度，作为垂直的Rectangle就是他宽度，水平的就是他高度。

然后定义它的颜色，定义了Ellipse的宽度。

画完了线我们需要画圆

在Grid放一个Grid，然后画一个圆，注意这个圆Stroke为颜色，然后Fill背景颜色

这样就可以让后面的Rectangle被圆不看

然后我们需要在我们的圆再一个小的

      <Ellipse Width="10" Height="10"
               Fill="{StaticResource RectangleColor}"></Ellipse>

这样就是我们的画法

全部代码

<Grid Margin="0,0,0,0">
                                        <Rectangle Margin="0,0,0,0"
                                                   Width="{StaticResource RectangleWidth}"
                                                   Fill="{StaticResource RectangleColor}" 
                                                   VerticalAlignment="Stretch"
                                                   HorizontalAlignment="Center"></Rectangle>
                                        <Grid >
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition></ColumnDefinition>
                                                <ColumnDefinition></ColumnDefinition>
                                            </Grid.ColumnDefinitions>
                                            <Rectangle Grid.Column="1"
                                                       Fill="{StaticResource RectangleColor}"
                                                       Height="{StaticResource RectangleWidth}"></Rectangle>
                                        </Grid>
                                        <Grid Width="{StaticResource EllipseWidth}" Height="{StaticResource EllipseWidth}">
                                            <Ellipse Stroke="{StaticResource RectangleColor}" StrokeThickness="6"
                                                     Fill="White"></Ellipse>
                                            <Ellipse Width="10" Height="10"
                                                     Fill="{StaticResource RectangleColor}"></Ellipse>
                                        </Grid>
                                    </Grid>

做完左边，就去做右边，右边其实就是一个Border里面一个TextBlock，当然里面最好把TextBlock换Grid，注意Margin，这样就好啦。

源代码：https://github.com/lindexi/csdn-uwp