问题:最近在做一个WP项目。现在有这么一个功能:
1.获取服务器的图片,将它们显示出来。
2.手机每屏显示一张,左右滑动可以显示下一张或上一张。
大概的效果如下图:
解决思路: 先解决布局和显示问题,网络获取数据暂时未实现。这里面要实现屏幕左右滑动的切换效果,还要动态的绑定数据,很适合用WP里的Pivot(枢纽视图管理布局)来实现。可以把图片放在PivotItem的Content中。xaml代码如下:
<!--图片开始-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="1,0,1,0">
<phone:Pivot Name="mainPivot" Title=""
ItemTemplate="{StaticResource PivotItem}"
HeaderTemplate="{StaticResource Header}"
>
</phone:Pivot>
</Grid>
<!--图片结束-->
这里因为需要动态的绑定数据,所以Pivot 自定义了HeaderTemplate和ItemTemplate的模板,这是样式模板。他们定义在ViewModel中,如下所示:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="PivotItem">
<Grid>
<Image Height="600" Source ="{Binding Uri}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="Header">
<TextBlock Text="" Height="1" FontSize ="0.5"/>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
这里将PivotItem里面添加Imaga控件,绑定Model即ImageEntity类中的Uri属性;将Pivot 的HeaderTemplate,即即用一个TextBlock 来当标题,将其设置为空白,接下来就是后台代码。
public MainPage()
{
InitializeComponent();
this.mainPivot.ItemsSource = arrayFeed;//为mainPivot指定数据源
}
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
AddDataText();
}
//数据源
ObservableCollection<ImageEntity> arrayFeed = new ObservableCollection<ImageEntity>();
//添加数据
private void AddDataText()
{
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th0.png" });//图片已经添加在程序中
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th1.png" });
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th2.png" });
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th3.png" });
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th4.png" });
}
这样,图片就可以在屏幕中滑动显示了。效果如下:
但是这里发现Pivot的滑动,当其到最后一张时,它会循环到第一张,这不是我想要的效果,网上查询一番,解决如下。
(1)数据源添加数据是,将集合头和尾的两个实体的Uri设为空。
private void AddDataText()
{
arrayFeed.Add(new ImageEntity() { Uri = "" });
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th0.png" });//图片已经添加在程序中
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th1.png" });
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th2.png" });
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th3.png" });
arrayFeed.Add(new ImageEntity() { Uri = "/Image/th4.png" });
arrayFeed.Add(new ImageEntity() { Uri = "" });
//this.ImageNum = 5;
// addColumn();
}
(2)为mainPivot添加一个SelectionChanged事件,当滑动时,检查是否是第一个Item或者最好一个Item,第一个则显示第一张图片,最后一个则显示最后一张图片,xmal如下:
<phone:Pivot Name="mainPivot" Title="" SelectionChanged="pivot2_SelectionChanged"
ItemTemplate="{StaticResource PivotItem}"
HeaderTemplate="{StaticResource Header}"
ItemsSource="{Binding BindData}">
</phone:Pivot>
cs代码如下:
/// <summary>
///滑动显示的界面操作
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void pivot2_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (mainPivot.SelectedIndex == 0)
{
Dispatcher.BeginInvoke(() =>
{
mainPivot.SelectedIndex = 1;
});
}
else if (mainPivot.SelectedIndex == (mainPivot.Items.Count - 1))
{
Dispatcher.BeginInvoke(() =>
{
mainPivot.SelectedIndex = (mainPivot.Items.Count - 2);
});
}
}
这里就解决了它显示的循环问题。
对了这里是Moedel
class ImageEntity
{
public string Uri { get; set; }
}
接下来就是图片先得标示问题了。这个问题的解决办法很简单,就是用一个StackPanel就可以实现了。上码上码:
xmal代码:
<Grid Grid.Row="2">
<Grid.Background>
<ImageBrush ImageSource="/Image/bottom_bg.png"/>
</Grid.Background>
<StackPanel VerticalAlignment="Center" x:Name="bottomPanel" Orientation="Horizontal">
</StackPanel>
</Grid>
cs代码:
/// <summary>
/// 记录加载的图片数量
/// </summary>
private int ImageNum = 0;
/// <summary>
/// 设置底部圆圈个数
/// </summary>
/// <param name="columnNum"></param>
private void addColumn( )
{
int width = 480 / ImageNum;
for (int i = 0; i < ImageNum; i++)
{
Image image1 = new Image();
image1.Width = width;
image1.Height = 60;
image1.Name = "ShowImageNum" + (i + 1);
image1.Source = new BitmapImage(new Uri("/Image/circle_unclick.png", UriKind.Relative));
bottomPanel.Children.Add(image1);
}
}
效果如下:
然后就是它得与对滑动事件一起改变了。cs代码如下:
/// <summary>
///滑动显示的界面操作
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void pivot2_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (mainPivot.SelectedIndex == 0)
{
Dispatcher.BeginInvoke(() =>
{
mainPivot.SelectedIndex = 1;
Image image = bottomPanel.FindName("ShowImageNum" + mainPivot.SelectedIndex) as Image;
image.Source = new BitmapImage(new Uri("/Image/circle_click.png", UriKind.Relative));
});
}
else if (mainPivot.SelectedIndex == (mainPivot.Items.Count - 1))
{
Dispatcher.BeginInvoke(() =>
{
mainPivot.SelectedIndex = (mainPivot.Items.Count - 2);
Image image = bottomPanel.FindName("ShowImageNum" + mainPivot.SelectedIndex) as Image;
image.Source = new BitmapImage(new Uri("/Image/circle_click.png", UriKind.Relative));
});
}
else
{
for (int i = 1; i <= ImageNum; i++)
{
Image image1 = bottomPanel.FindName("ShowImageNum" + i) as Image;
image1.Source = new BitmapImage(new Uri("/Image/circle_unclick.png", UriKind.Relative));
}
Image image = bottomPanel.FindName("ShowImageNum" + mainPivot.SelectedIndex) as Image;
image.Source = new BitmapImage(new Uri("/Image/circle_click.png", UriKind.Relative));
}
}
效果:
到这里就结束了,联网获取图片,这里不实现了,网上有的。
下载源码。
第一次写博客,也是第一次接触WP,如果有错误的地方,欢迎指出,若大神们有其他的方法来实现,希望能分享分享。