Windows Modern UI Message App指南

Question

我正在研究Windows應用商店消息應用程序項目。

基本上，該項目包含兩個應用程序。

首先是在Android上（目前），它將充當運行Windows（8.1）的用戶計算機的橋梁。 所有短信和彩信都是通過藍牙傳輸的（因此，僅由於需要藍牙，因此版本為8.1）

第二個應用程序是運行在計算機上的主要應用程序。 最后，用戶可以開始使用Windows App與他人發短信（稍后發送MMS）。 這里沒有要涉及的雲服務器，這才是重點。

我的問題很簡單。 我可以看到很多Windows Store應用程序（Metro應用程序），它們帶有用於對話（聊天/消息傳遞）的漂亮UI。 我不想像他們一樣出色，因為我缺乏優秀設計師的技能，但是我似乎在設計一個簡單的對話應用程序時遇到了麻煩。

更明確地說，我正在尋找可以做的指南：

1. 聊天氣泡（左側為已接收消息，右側為已發送消息）；
2. 在ListView / ListBox上進行平滑的動畫處理（到目前為止，使用ScrollIntoView可以使ListView閃爍...這令人不安）

現在是“它”。 任何幫助都超過了歡迎！ 謝謝 ！！

PS：我發現附近的東西： http : //blog.scottlogic.com/2011/07/15/a-wp7-conversation-view.html但不適用於W8.1 :(但現在您知道我在找什么對於;-)

Answer 1

對於圖表氣泡，您可以使用畫布將其繪制出來。

<UserControl
    x:Class="GridAppDemo.Controls.MyChatBubble"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridAppDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="306" Height="104">

    <Grid>
        <StackPanel Margin="0,0,-10,0">
            <StackPanel Orientation="Horizontal" Height="25" HorizontalAlignment="Right" Margin="0,0,10,0">
                <Border Background="Green" HorizontalAlignment="Left" Padding="10,5">
                    <TextBlock Text="Hello World!" Foreground="White"></TextBlock>
                </Border>
                <Canvas>
                    <Polygon Fill="Green" Points="0, 5, 10, 10, 0, 15" />
                </Canvas>
            </StackPanel>
            <StackPanel Margin="0,5,0,0" ></StackPanel>
            <StackPanel Orientation="Horizontal" Height="25">
                <Canvas>
                    <Polygon Fill="Green" Points="0, 10, 10, 5, 10, 15" />
                </Canvas>
                <Border Background="Green" HorizontalAlignment="Left" Padding="10,5" Margin="10,0,0,0">
                    <TextBlock Text="Hello World!" Foreground="White"></TextBlock>
                </Border>
            </StackPanel>
        </StackPanel>

    </Grid>
</UserControl>