Windows phone 之 UserControl的应用

一、新建一个UserControl.xaml页面  MyUserControl.xaml

添加代码如下：

<UserControl x:Class="bodypicture.MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

<Grid x:Name="LayoutRoot">
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,12,0">
            <Image Canvas.ZIndex="4" Name="image1"  Stretch="Fill" Width="200" Height="200" Margin="52,255,216,313">
                <Image.RenderTransform>
                    <SkewTransform AngleX="0" AngleY="0"  CenterX="0" CenterY="0"></SkewTransform>
                </Image.RenderTransform>
            </Image>
            <Image  Name="image2" Height="200" Stretch="Fill" Margin="252,256,66,312">
                <Image.RenderTransform>
                    <TransformGroup>
                        <SkewTransform AngleX="0" AngleY="-20" CenterX="0"  CenterY="0">
                        </SkewTransform>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
            <Image   Name="image3" Source="image/3.png"  Width="210" Height="50" Stretch="Fill" Margin="187,206,71,512">
                <Image.RenderTransform>
                    <TransformGroup>
                        <SkewTransform AngleX="-70" AngleY="0" CenterX="0"  CenterY="0">
                        </SkewTransform>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </Grid>
    </Grid>
</UserControl>

这样就可以在另一个页面Page1.xaml直接引用该UserContro.xaml页面了。

二、在Page1.xaml页面中。

之前，添加命名空间

  xmlns:my="clr-namespace:bodypicture"

  <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot"  Background="LightPink">
        <toolkit:GestureService.GestureListener>
            <toolkit:GestureListener DragStarted="OnGestureListenerDragStarted"
                                         DragDelta="OnGestureListenerDragDelta"
                                         DragCompleted="OnGestureListenerDragCompleted"
                                          />
        </toolkit:GestureService.GestureListener>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--ContentPanel - 在此处放置其他内容-->　　　　　////就是这一句了××××××××××××××××××××××××××××××××××××××××××××
        <my:MyUserControl></my:MyUserControl>
    </Grid>

刚开始，我在Page1.xaml.cs

添加如下代码：

MyUserControl u = new MyUserControl();
 u.image1.Source = new BitmapImage(new Uri(image_array[imgi], UriKind.Relative));
 u.image2.Source = new BitmapImage(new Uri(image_array[imgj], UriKind.Relative));

运行程序，发现图片没有显示，经过若干挣扎。。才发现，

我不能这么写：MyUserControl u = new MyUserControl();因为这相当于重新实例化了一个类MyUserControl，不再是Page1.xaml的UserControl了，这样怎么会显示数据呢？

所以，修改如下：

 <my:MyUserControl x:Name="userControl"></my:MyUserControl>

给MyUserControl命名。

然后，在Page1.xaml.cs中就可以直接使用了，不用实例化了。

userControl.image1.Source = new BitmapImage(new Uri(image_array[imgi], UriKind.Relative));
userControl.image2.Source = new BitmapImage(new Uri(image_array[imgj], UriKind.Relative));

ok，图片成功显示。

当然，也可以在MyUserControl.XAML.CS页面中，定义属性。

        private string image11;

        public string Image1
        {
            get { return image11; }
            set
            {
                image11 = value;
                BitmapImage bit1 = new BitmapImage(new Uri(image11, UriKind.Relative));
                image1.Source = bit1;
            }
        }

        private string image22;

        public string Image2
        {
            get { return image22; }
            set
            {
                image22 = value;
                image2.Source = new BitmapImage(new Uri(image22, UriKind.Relative));
            }
        } 

这样，在Page1.xaml.cs中或者Page1.xaml中都可以使用Image1、Image2属性进行设置他们的图片来源。

这就需要根据情况进行选择了。