Windows Store Apps note001 about image basic operation

1、选择本地图片并载入;

2、点击换图;

3、combobox改变图片的stretch

4、slider改变图片透明度。

<Page
    x:Class="test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:test"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.Background>
            <ImageBrush x:Name="background_imageBrush" ImageSource="Assets/background1.png" Stretch="None"/>
        </Grid.Background>

        <Grid Height="300" Width="400" HorizontalAlignment="Center" VerticalAlignment="Center">
            <!--通过用一个处于窗口中间的grid来确保无论窗口如何变化grid中的内容都能置中-->
            <Grid.RowDefinitions>
                <RowDefinition Height="25*"/>
                <RowDefinition Height="25*"/>
                <RowDefinition Height="25*"/>
                <RowDefinition Height="25*"/>
                <!--数字后面带有*为相对高度,相当于25/(25+25+25+25)*整个grid的高度-->
            </Grid.RowDefinitions>
            <Button Grid.Row="0" x:Name="choose_background_picture" Content="Choose picture" HorizontalAlignment="Center" VerticalAlignment="Center" Click="choose_background_picture_Click"/>

            <Button Grid.Row="1" x:Name="change_background_picture" Content="Change Picture" HorizontalAlignment="Center" VerticalAlignment="Center" Click="change_background_picture_Click"/>

            <ComboBox Grid.Row="2" x:Name="change_background_picture_stretch" SelectionChanged="change_background_picture_stretch_SelectionChanged" PlaceholderText="Stretch" HorizontalAlignment="Center" VerticalAlignment="Center" Width="129">
                <!--combobox改变值时的触发写法-->
                <!--PlaceholderText是提示性的灰字-->
                <ComboBoxItem Content="None"/>
                <ComboBoxItem Content="Fill"/>
                <ComboBoxItem Content="Uniform"/>
                <ComboBoxItem Content="UniformToFill"/>
            </ComboBox>

            <StackPanel Grid.Row="3" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" Width="320">
                <Slider x:Name="change_background_picture_opacity" PointerMoved="change_background_picture_opacity_PointerMoved" Value="100" HorizontalAlignment="Center" Height="46" VerticalAlignment="Center" Width="224"/>
                <!--slider改变值时的触发写法-->
                <Canvas Width="30"/>
                <TextBox HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding ElementName=change_background_picture_opacity, Path=Value, Mode=TwoWay}" VerticalAlignment="Center"/>
                <!--绑定的写法-->
            </StackPanel>
        </Grid>
    </Grid>
</Page>

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

//需用到的namespace
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;

// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上提供

namespace test
{
    /// <summary>
    /// 可独立使用或用于导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
        // 打开一个窗口并选择图片作为背景图
        private async void choose_background_picture_Click(object sender, RoutedEventArgs e)
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.FileTypeFilter.Add(".bmp");
            picker.FileTypeFilter.Add(".png");
            picker.FileTypeFilter.Add(".jpg");
            picker.FileTypeFilter.Add(".jpeg");
            picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
            StorageFile file = await picker.PickSingleFileAsync();
            if (file != null)
            {
                IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
                Windows.UI.Xaml.Media.Imaging.BitmapImage bmp = new Windows.UI.Xaml.Media.Imaging.BitmapImage();
                bmp.SetSource(stream);
                background_imageBrush.ImageSource = bmp;
            }
        }
        // 简单的改变图片写法
        private void change_background_picture_Click(object sender, RoutedEventArgs e)
        {
            Windows.UI.Xaml.Media.Imaging.BitmapImage bmp = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri(base.BaseUri, "/Assets/background2.png"));
            this.background_imageBrush.ImageSource = bmp;
        }
        // 改变图片显示方式写法
        private void change_background_picture_stretch_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (change_background_picture_stretch.SelectedIndex == 0)
            {
                background_imageBrush.Stretch = Stretch.None;
            }
            if (change_background_picture_stretch.SelectedIndex == 1)
            {
                background_imageBrush.Stretch = Stretch.Fill;
            }
            if (change_background_picture_stretch.SelectedIndex == 2)
            {
                background_imageBrush.Stretch = Stretch.Uniform;
            }
            if (change_background_picture_stretch.SelectedIndex == 3)
            {
                background_imageBrush.Stretch = Stretch.UniformToFill;
            }
        }
        // 修改透明度的写法
        private void change_background_picture_opacity_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            background_imageBrush.Opacity =  change_background_picture_opacity.Value * 1.0 / 100;
        }
    }
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值