韦德国际1946 1

兴趣线

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

韦德国际1946 2

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

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

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

HorizontalAlignment="Center"

韦德国际1946 3

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

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

<Grid.ColumnDefinitions>

             <ColumnDefinition></ColumnDefinition>

             <ColumnDefinition></ColumnDefinition>

 </Grid.ColumnDefinitions>

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

<Rectangle Grid.Column="1"/>

韦德国际1946 4

开始设计我们不知道宽度和高度的值,每次修改都需要改好多个,那么我们如何就修改一个?我们可以使用常亮,也就是我们的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背景颜色

韦德国际1946 5

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

韦德国际1946 6

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

      <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

韦德国际1946 7
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0
国际许可协议
进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd
),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

<script type=”text/javascript”> $(function () { $(‘pre.prettyprint
code’).each(function () { var lines =
$(this).text().split(‘\n’).length; var $numbering =
$(‘<ul/>’).addClass(‘pre-numbering’).hide();
$(this).addClass(‘has-numbering’).parent().append($numbering); for (i =
1; i <= lines; i++) { $numbering.append($(‘<li/>’).text(i)); };
$numbering.fadeIn(1700); }); }); </script>

我们的图片不会被遮盖,因为我们可以有无限空间

行间距

我们在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

韦德国际1946 8

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

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

韦德国际1946 9

全部代码

    <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>

韦德国际1946 10

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

       <Grid x:Name="Stamp" >

            <Image x:Name="image" Width="500"

                   Margin="200,10,10,10">

            </Image>

        </Grid>

我们首先写一个Grid,我们需要给他名字,我这里给他Stamp,需要名称可以让我们在后面使用截图用到元素。

保存需要使用SetPixelData
BitmapPixelFormat pixelFormat, BitmapAlphaMode alphaMode, System.UInt32 width, System.UInt32 height, System.Double dpiX, System.Double dpiY, [Range(0, int.MaxValue)] System.Byte[] pixels

韦德国际1946 11

水印

UWP图片水印简单,我们需要一个Image和一个水印,水印在图片Zindex比他大

我们在我们图片的同个Panel放一个TextBlock,然后TextBlock就是我们的水印。

            <Grid x:Name="Stamp">

                <Image x:Name="image" Width="500"

                       Margin="300,10,10,10" />

                <TextBlock Text="blog.csdn.net/lindexi_gd"

                           HorizontalAlignment="Center"

                           VerticalAlignment="Center" />

            </Grid>

韦德国际1946 12

可以看到我们有了水印,虽然这样看起来一定都不觉得是好的。(我不想说很烂)

如果遇到了全黑的图,我们还没办法加水印,但是基本99%的图是可以的。(谁说的,代码是黑的,vs背景用黑的好多)

如果想要改颜色,每个颜色改为和图不同的,好难。

我想到渐变,这样每个颜色都有。LinearGradientBrush是渐变,我们需要每个字符都看到,我们把渐变改为从上到下。EndPoint="0,1" StartPoint="0,0"一个是开始的Point,一个是结束

                    <TextBlock.Foreground>

                        <LinearGradientBrush EndPoint="结束点X,结束点Y" StartPoint="开始点X,开始点Y">

                            <GradientStop Color="颜色 默认offset=0"/>

                            <GradientStop Color="White" Offset="1 1就是100%"/>

                        </LinearGradientBrush>

                    </TextBlock.Foreground>

韦德国际1946 13

说到这,我们来总的说下,就是用一个滚动条把我们的一个Grid放进去,然后Grid里面存在一张图片和一个TextBlock,图片就是我们需要加水印的,TextBlock就是水印,水印颜色最好渐变,然后使用获取元素图片截图。保存截图就是我们的图片加水印,做法很简单。

如果对大图感觉水印太小,可以用ViewBox。如果觉得我们水印要在中间,或下方或其他,那么我们需要把Image的宽度不设置,然后Grid也不设置高度和宽度。

        <ScrollViewer Width="10" Height="10"

            VerticalScrollBarVisibility="Visible"

                      HorizontalScrollBarVisibility="Visible">

            <Grid x:Name="Stamp">

                <Image x:Name="image" HorizontalAlignment="Left"

                       VerticalAlignment="Top"

                       Margin="10,10,10,10" />

                <TextBlock Text="blog.csdn.net/lindexi_gd"

                           HorizontalAlignment="Center"

                           VerticalAlignment="Center" >

                    <TextBlock.Foreground>

                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

                            <GradientStop Color="Black"/>

                            <GradientStop Color="White" Offset="1"/>

                        </LinearGradientBrush>

                    </TextBlock.Foreground>

                </TextBlock>

            </Grid>

        </ScrollViewer>

参见:http://www.zmy123.cn/?p=1257

韦德国际1946 14
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0
国际许可协议
进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd
),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

<script type=”text/javascript”> $(function () { $(‘pre.prettyprint
code’).each(function () { var lines =
$(this).text().split(‘\n’).length; var $numbering =
$(‘<ul/>’).addClass(‘pre-numbering’).hide();
$(this).addClass(‘has-numbering’).parent().append($numbering); for (i =
1; i <= lines; i++) { $numbering.append($(‘<li/>’).text(i)); };
$numbering.fadeIn(1700); }); }); </script>

然后我们可以使用RenderTargetBitmap保存我们屏幕Grid显示的

本文主要讲如何保存我们的屏幕显示的,保存为图片,也就是截图,截我们应用显示的。

可以看到我们有部分被裁掉

            var bitmap = new RenderTargetBitmap();

            StorageFile file = await KnownFolders.PicturesLibrary.CreateFileAsync("1.jpg",

                CreationCollisionOption.GenerateUniqueName);

            await bitmap.RenderAsync(Stamp);

            var buffer = await bitmap.GetPixelsAsync();

            using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))

            {

                var encod = await BitmapEncoder.CreateAsync(

                    BitmapEncoder.JpegEncoderId, stream);

                encod.SetPixelData(BitmapPixelFormat.Bgra8,

                    BitmapAlphaMode.Ignore,

                    (uint)bitmap.PixelWidth,

                    (uint)bitmap.PixelHeight,

                    DisplayInformation.GetForCurrentView().LogicalDpi,

                    DisplayInformation.GetForCurrentView().LogicalDpi,

                    buffer.ToArray()

                   );

                await encod.FlushAsync();

            }

我们的Grid被一个Grid,背景为白色的遮盖,结果没影响

我们在Grid放一个Image,然后可以看到,我们的原图

那么我们要显示我们的图片显示全,我们可以借用一个简单的控件

韦德国际1946 15

BitmapEncoder可以保存为bmp、jpg、gif、png

我们把图片一部分不显示,截图下来看下不显示的是不是就不会在图片

        <ScrollViewer VerticalScrollBarVisibility="Visible"

                      HorizontalScrollBarVisibility="Visible">

            <Grid x:Name="Stamp" >

                <Image x:Name="image" Width="500"

                   Margin="300,10,10,10">

                </Image>

            </Grid>

        </ScrollViewer>

我们可以在滚动条写大小为很小,但是Width="1"就出错,我们不需要把他放在用户可视的,也就是放在最底层也是可以

await bitmap.RenderAsync(Stamp);能把一个UIelement显示转为图片,不过这个图片我们需要用BitmapEncoder才可以保存为我们的图片

  <Grid Grid.Row="0" Background="White"></Grid>

UWP有一个功能,可以截图,RenderTargetBitmap

韦德国际1946 16

韦德国际1946 17

假如我们不显示Grid

相关文章