Windows Phone：表情符号网格

Question

How to create an Emoticons Grid in windows phone? I am new in windows phone and I have not idea how to implement this and which control to use... I have searched on google but didn't get proper solution.I tried to make with grid control but its not working.

Answer 1

Ive created a custom control for this, like so:

<Controls:ChildWindow x:Class="ChildWindows.SmileyDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=CustomControls"
    xmlns:Toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    BorderThickness="2" mc:Ignorable="d"
    BorderBrush="{StaticResource PhoneBorderBrush}"
    Style="{StaticResource ChildWindowTemplate}" >

    <Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{ StaticResource PhoneBackgroundBrush }" >
        <ListBox x:Name="itemControl" Margin="4" ItemsSource="{Binding}" Background="White">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Toolkit:WrapPanel HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Margin="10" BorderThickness="1" BorderBrush="Silver">
                        <Image Margin="5" Width="64" Height="64" Source="{Binding ImagePaths.Large_69x69}" Toolkit:TiltEffect.IsTiltEnabled="True" />
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Controls:ChildWindow>

The code behind this control:

public partial class SmileyDialog
{
    #region Fields

    public event CloseEventHandler<EmoticonItem> OnClose;

    #endregion Fields

    #region Properties

    public bool IsOpened { get { return ChildWindowPopup.IsOpen; } }

    #endregion Properties

    #region Constructor

    public SmileyDialog()
    {
        InitializeComponent();

        itemControl.ItemsSource = EmoticonsMap.GetEmoticons();
    }

    #endregion Constructor

    #region overrides

    protected override void OnOpened()
    {
        var page = ((ContentControl)Application.Current.RootVisual).Content as PhoneApplicationPage;
        if (page != null) page.BackKeyPress += PageBackKeyPress;

        itemControl.SelectedItem = null;
        itemControl.SelectionChanged += ItemControlSelectionChanged;
    }

    protected override void OnClosing(CancelEventArgs e)
    {
        var page = ((ContentControl)Application.Current.RootVisual).Content as PhoneApplicationPage;
        if (page != null) page.BackKeyPress -= PageBackKeyPress;
        itemControl.SelectionChanged -= ItemControlSelectionChanged;

        if (OnClose != null) OnClose(itemControl.SelectedItem as EmoticonItem);
    }

    #endregion overrides

    #region UI events

    private void PageBackKeyPress(object sender, CancelEventArgs e)
    {
        Close();
    }

    private void ItemControlSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        Close();
    }

    #endregion UI events
}

Usage:

private SmileyDialog _smileDialog;

        private void RadSmileyImageButton_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            if (_smileDialog != null && _smileDialog.IsOpened) return;

            //SetApplicationBarVisibility(false);

            if (_smileDialog == null)
            {
                _smileDialog = new SmileyDialog();
                _smileDialog.OnClose += SmileDialogOnClose;
            }
            _smileDialog.Show();
        }

I hope you will be able to reuse the code, if not comment me for help.