×
Namespaces

Variants
Actions

如何使用ListBox模拟短信系统

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Messages.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
Hazel Xie 在 18 Oct 2012 创建
最后由 hamishwillee 在 03 Jul 2013 编辑

本文的目标是创建一个短信系统,用来实现如何在类似于对话模式的数据呈现

介绍

首先,我们需要创建一个Sms类,来提供我们需要的关于短信的信息,这里我会非常简单的提供我们的Sms类,在实际使用中,会需要更多的数据类记录我们的数据。 以下就是我们的Sms类:

    public class Sms
{
public double FontSize { get; set; }
public string Str { get; set; }
public string SmsFrom { get; set; }
public bool isMe { get; set; }
 
}

里面提供了4个字段,字体的大小,Sms的内容,Sms的来源,和是否是我发送的。 因为我发送的和非我发送的会显示在ListBox的左右两端,所以,需要isMe这个Boolean类型的属性来标明。 然后我们将会添加一个辅助类GetSampleCustomerList来完成我们的测试数据的获取。

        public static ObservableCollection<Sms> GetSampleCustomerList()
{
return new ObservableCollection<Sms>(new Sms[5] {
new Sms(){ FontSize=22, isMe=true, SmsFrom="Otomii:", Str="Hi Anna."},
new Sms(){ FontSize=22, isMe=false, SmsFrom="Anna:", Str="Hi Otomii."},
new Sms(){ FontSize=22, isMe=true, SmsFrom="Otomii:", Str="What's your name?"},
new Sms(){ FontSize=22, isMe=false, SmsFrom="Anna:", Str="My name is Anna."},
new Sms(){ FontSize=1, isMe=true, SmsFrom="", Str=""}
});
}

然后我们可以在MainPage的构造函数中进行添加:

private ObservableCollection<Sms> SmsCollection;
// Constructor
public MainPage()
{
InitializeComponent();
SmsCollection = Sms.GetSampleCustomerList();
SmsListBox.ItemsSource = SmsCollection;
}

有了,我们的Sms类之后,我们就需要回到我们的界面了。 下面我将会呈现ListBox,然后再进行介绍

<ListBox Name="SmsListBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="3" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False"
RadiusX="1" RadiusY="1" />
<Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False"
RadiusX="1" RadiusY="1" />
<ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{Binding isMe,Converter={StaticResource DatabindingDebugConverter}}"
Margin="{TemplateBinding Padding}" />
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1"
Visibility="Collapsed" RadiusX="1" RadiusY="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Margin="0" Background="GreenYellow">
<TextBlock Margin="0" Foreground="Black">
<Run Text="{Binding SmsFrom}" FontSize="{Binding FontSize}"></Run>
<Run Text="{Binding Str}" FontSize="{Binding FontSize}"></Run>
</TextBlock>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

这是一个提供了自定义的ItemContainerStyle和ItemTemplate的 ListBox, 通过ItemContainerStyle可以定义容器的呈现,通过ItemTemplate可以定义Item的呈现。 ItemContainerStyle呈现中最关键的语句如下:

HorizontalAlignment="{Binding isMe,Converter={StaticResource DatabindingDebugConverter}}"

通过这条语句,我们可以完成我们对于Sms的左右呈现我呢提,现在我们来回到我们的DatabindingDebugConverter 类,这是一个转换类,我将会通过isMe这个属性,然后转换成为是否左对齐和右对齐。 DatabindingDebugConverter类:

    public class DatabindingDebugConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value.Equals(true))
return HorizontalAlignment.Right;
else
return HorizontalAlignment.Left;
}
 
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return value;
}
}

然后我通过以下代码进行动态添加:

xmlns:local="clr-namespace:SmsDemo"
<phone:PhoneApplicationPage.Resources>
<local:DatabindingDebugConverter x:Key="DatabindingDebugConverter" />
</phone:PhoneApplicationPage.Resources>

然后是ItemTemplate呈现,ItemTemplate的呈现就比较简单了,就是简单的把我们需要呈现的格式输入即可。

<ListBox.ItemTemplate>
<DataTemplate>
<Border Margin="0" Background="GreenYellow">
<TextBlock Margin="0" Foreground="Black">
<Run Text="{Binding SmsFrom}" FontSize="{Binding FontSize}"></Run>
<Run Text="{Binding Str}" FontSize="{Binding FontSize}"></Run>
</TextBlock>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>

然后我们提供了一个按钮和一个文本框进行调试:

<Button Name="AddSms" Content="Test" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,605,0,-101"
Click="AddSms_Click" />
<TextBox Name="txtInput" HorizontalAlignment="Left" Height="72" TextWrapping="Wrap" VerticalAlignment="Top"
Width="226" Margin="134,605,0,-101" />

按钮点击代码:

        private void AddSms_Click(object sender, RoutedEventArgs e)
{
if (this.txtInput.Text.Equals(string.Empty))
{
SmsCollection.Insert(SmsCollection.Count - 1, new Sms() { FontSize = 22, isMe = true, SmsFrom = i + ".Otomii:", Str = "What's your name?" });
SmsCollection.Insert(SmsCollection.Count - 1, new Sms() { FontSize = 22, isMe = false, SmsFrom = i + ".Anna:", Str = "My name is Anna." });
i++;
Dispatcher.BeginInvoke(() =>
{
SmsListBox.ScrollIntoView(SmsListBox.Items.Last());
});
}
else
{
SmsCollection.Insert(SmsCollection.Count - 1, new Sms() { FontSize = 22, isMe = true, SmsFrom = "Otomii:", Str = txtInput.Text });
txtInput.Text = string.Empty;
}
}

项目调试和源代码

项目截图:

SmsDemo1.JPG

SmsDemo2.JPG

SmsDemo3.JPG

SmsDemo4.JPG

源代码:

File:SmsDemo.zip

This page was last modified on 3 July 2013, at 14:38.
93 page views in the last 30 days.
×