none
windows phone 8全景应用程序中,如何插入每一个“设计”的图片? RRS feed

  • 问题

  • 使用VS2012,WP8.0SDK,在全景程序中,每个“设计”标题前部的图片应该如何插入?达到自定义的效果?
    2014年7月16日 4:09

答案

  • 好的。我来添加一下示例代码吧。

    首先是ItemViewModel中添加ImgPath的定义:

    private string _imgPath;
    public string ImgPath
    {
        get
        {
            return _imgPath;
        }
        set
        {
            if (value != _imgPath)
            {
                _imgPath = value;
                NotifyPropertyChanged("ImgPath");
            }
        }
    }

    然后是MainViewModelSampleData.xaml中的修改:

    <vm:MainViewModel
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:PanoramaApp1.ViewModels"
        SampleProperty="示例文本属性值">
    
        <vm:MainViewModel.Items>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计一" LineTwo="Maecenas praesent accumsan bibendum" LineThree="Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计二" LineTwo="Dictumst eleifend facilisi faucibus" LineThree="Pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计三" LineTwo="Habitant inceptos interdum lobortis" LineThree="Accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计四" LineTwo="Nascetur pharetra placerat pulvinar" LineThree="Pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计五" LineTwo="Sagittis senectus sociosqu suscipit" LineThree="Dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计六" LineTwo="Torquent ultrices vehicula volutpat" LineThree="Senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend"/>
        </vm:MainViewModel.Items>
    
    </vm:MainViewModel>
    我这里使用了Assets/AlignmentGrid.png图片作为示例,根据你的需要去变化就可以了。



    2014年7月16日 8:22

全部回复

  • 你好。

    全景应用模板里,黄色色块应该是一个Border。你需要将它替换为Image控件:

    <DataTemplate>
        <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
            <!--用图像替换矩形-->
            <!--<Border BorderThickness="1" Width="99" Height="99" BorderBrush="#FFFFC700" Background="#FFFFC700"/>-->
            <Image Width="99" Height="99" Source="{Binding ImgPath}"/>
            <StackPanel Width="311" Margin="8,-7,0,0">
                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
                <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>

    我们需要在ItemViewModel中添加ImgPath属性,类似LineOne的写法。

    然后在MainViewModelSampleData.xaml中添加ImgPath的值。

    完成后,就可以在设计视图中看到我们添加的图片了。

    2014年7月16日 6:07
  • 请您告诉我添加完image控件后,如何在ItemViewModel中添加ImgPath属性。以及在MainViewModelSampleData.xaml中添加ImgPath的值(比如指定图片路径什么的),谢谢!
    2014年7月16日 8:18
  • 好的。我来添加一下示例代码吧。

    首先是ItemViewModel中添加ImgPath的定义:

    private string _imgPath;
    public string ImgPath
    {
        get
        {
            return _imgPath;
        }
        set
        {
            if (value != _imgPath)
            {
                _imgPath = value;
                NotifyPropertyChanged("ImgPath");
            }
        }
    }

    然后是MainViewModelSampleData.xaml中的修改:

    <vm:MainViewModel
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:PanoramaApp1.ViewModels"
        SampleProperty="示例文本属性值">
    
        <vm:MainViewModel.Items>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计一" LineTwo="Maecenas praesent accumsan bibendum" LineThree="Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计二" LineTwo="Dictumst eleifend facilisi faucibus" LineThree="Pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计三" LineTwo="Habitant inceptos interdum lobortis" LineThree="Accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计四" LineTwo="Nascetur pharetra placerat pulvinar" LineThree="Pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计五" LineTwo="Sagittis senectus sociosqu suscipit" LineThree="Dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis"/>
            <vm:ItemViewModel ImgPath="Assets/AlignmentGrid.png" LineOne="设计六" LineTwo="Torquent ultrices vehicula volutpat" LineThree="Senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst eleifend"/>
        </vm:MainViewModel.Items>
    
    </vm:MainViewModel>
    我这里使用了Assets/AlignmentGrid.png图片作为示例,根据你的需要去变化就可以了。



    2014年7月16日 8:22