Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

如何使用ListBox模拟短信系统

From 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 11:38.
93 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×