wpf模仿QQ表情

效果圖：

style：

<Style x:Key="LBXITEM_VERTICAL" TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="border"  Width="24" Height="24">
                            <local:GifImage x:Name="gif" BorderThickness="1"
                                            BorderBrush="#D3E4F0" Source="{Binding gifImg}"
                                            Stretch="Uniform"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" TargetName="gif" Value="#4CA0D9"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="BorderBrush" TargetName="gif" Value="#4CA0D9"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="LBX_VERTICAL" TargetType="ListBox">
            <Setter Property="ItemContainerStyle" Value="{DynamicResource LBXITEM_VERTICAL}"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal" IsItemsHost="True" Width="300">
                        </WrapPanel>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

local:GifImage 在WPF中動態顯示gif http://www.cnblogs.com/zhouyinhui/archive/2007/12/23/1011555.html

xaml：

  <ListBox x:Name="listboGif" Style="{StaticResource LBX_VERTICAL}">
        </ListBox>

xaml.CS：

Loaded：

string xmlPath = "../../Face/emoticons.xml";
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(xmlPath);//xmlPath為xml文件路徑
            XmlNode xmlNode = xmlDoc.SelectSingleNode("/Emoticons");
            XmlNodeList oList = xmlNode.ChildNodes;
            //XmlNode xmlNode1 = xmlDoc.SelectSingleNode("/Emoticons/Emoticon");
            XmlNode oCurrentNode;
            List<gifModel> list = new List<gifModel>();
            gifModel gif;
            for (int i = 0; i < oList.Count; i++)
            {
                gif = new gifModel();
                oCurrentNode = oList[i];
                string str = oCurrentNode.BaseURI.Substring(0, oCurrentNode.BaseURI.LastIndexOf("e"));
                gif.gifImg =str+oCurrentNode.InnerText;
                list.Add(gif);
            }
            listboGif.ItemsSource = list;

emoticons.xml：

<?xml version="1.0"?>
<Emoticons>
<Emoticon id="0" tip="微笑">0.gif</Emoticon>
<Emoticon id="1" tip="撇嘴">1.gif</Emoticon>
<Emoticon id="2" tip="色">2.gif</Emoticon>
<Emoticon id="3" tip="發呆">3.gif</Emoticon>
<Emoticon id="4" tip="得意">4.gif</Emoticon>
<Emoticon id="5" tip="流淚">5.gif</Emoticon>
<Emoticon id="6" tip="害羞">6.gif</Emoticon>
<Emoticon id="7" tip="閉嘴">7.gif</Emoticon>
<Emoticon id="8" tip="睡">8.gif</Emoticon>
<Emoticon id="9" tip="大哭">9.gif</Emoticon>
<Emoticon id="10" tip="尷尬">10.gif</Emoticon>
<Emoticon id="11" tip="發怒">11.gif</Emoticon>
<Emoticon id="12" tip="調皮">12.gif</Emoticon>
<Emoticon id="13" tip="呲牙">13.gif</Emoticon>
<Emoticon id="14" tip="驚訝">14.gif</Emoticon>
<Emoticon id="15" tip="難過">15.gif</Emoticon>
<Emoticon id="16" tip="酷">16.gif</Emoticon>
<Emoticon id="17" tip="冷汗">17.gif</Emoticon>
<Emoticon id="18" tip="抓狂">18.gif</Emoticon>
<Emoticon id="19" tip="吐">19.gif</Emoticon>
<Emoticon id="20" tip="偷笑">20.gif</Emoticon>
<Emoticon id="21" tip="可愛">21.gif</Emoticon>
<Emoticon id="22" tip="白眼">22.gif</Emoticon>
<Emoticon id="23" tip="傲慢">23.gif</Emoticon>
<Emoticon id="24" tip="饑餓">24.gif</Emoticon>
<Emoticon id="25" tip="困">25.gif</Emoticon>
<Emoticon id="26" tip="驚恐">26.gif</Emoticon>
<Emoticon id="27" tip="流汗">27.gif</Emoticon>
<Emoticon id="28" tip="憨笑">28.gif</Emoticon>
<Emoticon id="29" tip="大兵">29.gif</Emoticon>
<Emoticon id="30" tip="奮鬥">30.gif</Emoticon>
<Emoticon id="31" tip="咒罵">31.gif</Emoticon>
<Emoticon id="32" tip="疑問">32.gif</Emoticon>
<Emoticon id="33" tip="噓...">33.gif</Emoticon>
<Emoticon id="34" tip="暈">34.gif</Emoticon>
<Emoticon id="35" tip="折磨">35.gif</Emoticon>
<Emoticon id="36" tip="衰">36.gif</Emoticon>
<Emoticon id="37" tip="骷髏">37.gif</Emoticon>
<Emoticon id="38" tip="敲打">38.gif</Emoticon>
<Emoticon id="39" tip="再見">39.gif</Emoticon>
<Emoticon id="40" tip="擦汗">40.gif</Emoticon>
<Emoticon id="41" tip="摳鼻">41.gif</Emoticon>
<Emoticon id="42" tip="鼓掌">42.gif</Emoticon>
<Emoticon id="43" tip="糗大了">43.gif</Emoticon>
<Emoticon id="44" tip="壞笑">44.gif</Emoticon>
<Emoticon id="45" tip="左哼哼">45.gif</Emoticon>
<Emoticon id="46" tip="右哼哼">46.gif</Emoticon>
<Emoticon id="47" tip="哈欠">47.gif</Emoticon>
<Emoticon id="48" tip="鄙視">48.gif</Emoticon>
<Emoticon id="49" tip="委屈">49.gif</Emoticon>
<Emoticon id="50" tip="快哭了">50.gif</Emoticon>
<Emoticon id="51" tip="陰險">51.gif</Emoticon>
<Emoticon id="52" tip="親親">52.gif</Emoticon>
<Emoticon id="53" tip="嚇">53.gif</Emoticon>
<Emoticon id="54" tip="可憐">54.gif</Emoticon>
<Emoticon id="55" tip="菜刀">55.gif</Emoticon>
<Emoticon id="56" tip="西瓜">56.gif</Emoticon>
<Emoticon id="57" tip="啤酒">57.gif</Emoticon>
<Emoticon id="58" tip="籃球">58.gif</Emoticon>
<Emoticon id="59" tip="乒乓">59.gif</Emoticon>
<Emoticon id="60" tip="咖啡">60.gif</Emoticon>
<Emoticon id="61" tip="飯">61.gif</Emoticon>
<Emoticon id="62" tip="豬頭">62.gif</Emoticon>
<Emoticon id="63" tip="玫瑰">63.gif</Emoticon>
<Emoticon id="64" tip="凋謝">64.gif</Emoticon>
<Emoticon id="65" tip="示愛">65.gif</Emoticon>
<Emoticon id="66" tip="愛心">66.gif</Emoticon>
<Emoticon id="67" tip="心碎">67.gif</Emoticon>
<Emoticon id="68" tip="蛋糕">68.gif</Emoticon>
<Emoticon id="69" tip="閃電">69.gif</Emoticon>
<Emoticon id="70" tip="炸彈">70.gif</Emoticon>
<Emoticon id="71" tip="刀">71.gif</Emoticon>
<Emoticon id="72" tip="足球">72.gif</Emoticon>
<Emoticon id="73" tip="瓢蟲">73.gif</Emoticon>
<Emoticon id="74" tip="便便">74.gif</Emoticon>
<Emoticon id="75" tip="月亮">75.gif</Emoticon>
<Emoticon id="76" tip="太陽">76.gif</Emoticon>
<Emoticon id="77" tip="禮物">77.gif</Emoticon>
<Emoticon id="78" tip="擁抱">78.gif</Emoticon>
<Emoticon id="79" tip="強">79.gif</Emoticon>
<Emoticon id="80" tip="弱">80.gif</Emoticon>
<Emoticon id="81" tip="握手">81.gif</Emoticon>
<Emoticon id="82" tip="勝利">82.gif</Emoticon>
<Emoticon id="83" tip="抱拳">83.gif</Emoticon>
<Emoticon id="84" tip="勾引">84.gif</Emoticon>
<Emoticon id="85" tip="拳頭">85.gif</Emoticon>
<Emoticon id="86" tip="差勁">86.gif</Emoticon>
<Emoticon id="87" tip="愛你">87.gif</Emoticon>
<Emoticon id="88" tip="NO">88.gif</Emoticon>
<Emoticon id="89" tip="OK">89.gif</Emoticon>
<Emoticon id="90" tip="愛情">90.gif</Emoticon>
<Emoticon id="91" tip="飛吻">91.gif</Emoticon>
<Emoticon id="92" tip="跳跳">92.gif</Emoticon>
<Emoticon id="93" tip="發抖">93.gif</Emoticon>
<Emoticon id="94" tip="慪火">94.gif</Emoticon>
<Emoticon id="95" tip="轉圈">95.gif</Emoticon>
<Emoticon id="96" tip="磕頭">96.gif</Emoticon>
<Emoticon id="97" tip="回頭">97.gif</Emoticon>
<Emoticon id="98" tip="跳繩" >98.gif</Emoticon>
<Emoticon id="99" tip="揮手">99.gif</Emoticon>
<Emoticon id="100" tip="激動">100.gif</Emoticon>
<Emoticon id="101" tip="街舞">101.gif</Emoticon>
<Emoticon id="102" tip="獻吻">102.gif</Emoticon>
<Emoticon id="103" tip="左太極">103.gif</Emoticon>
<Emoticon id="104" tip="右太極">104.gif</Emoticon>
<Emoticon id="105" tip="非典">105.gif</Emoticon>
<Emoticon id="106" tip="閃人">106.gif</Emoticon>
<Emoticon id="107" tip="找">107.gif</Emoticon>
<Emoticon id="108" tip="美眉">108.gif</Emoticon>
<Emoticon id="109" tip="貓咪">109.gif</Emoticon>
<Emoticon id="110" tip="小狗">110.gif</Emoticon>
<Emoticon id="111" tip="錢">111.gif</Emoticon>
<Emoticon id="112" tip="燈泡">112.gif</Emoticon>
<Emoticon id="113" tip="酒盃">113.gif</Emoticon>
<Emoticon id="114" tip="音樂">114.gif</Emoticon>
<Emoticon id="115" tip="藥丸">115.gif</Emoticon>
<Emoticon id="116" tip="吻">116.gif</Emoticon>
<Emoticon id="117" tip="會議">117.gif</Emoticon>
<Emoticon id="118" tip="電話">118.gif</Emoticon>
<Emoticon id="119" tip="時間">119.gif</Emoticon>
<Emoticon id="120" tip="郵件">120.gif</Emoticon>
<Emoticon id="121" tip="電視">121.gif</Emoticon>
<Emoticon id="122" tip="多多">122.gif</Emoticon>
<Emoticon id="123" tip="美女">123.gif</Emoticon>
<Emoticon id="124" tip="漢良">124.gif</Emoticon>
<Emoticon id="125" tip="毛毛">125.gif</Emoticon>
<Emoticon id="126" tip="Q仔">126.gif</Emoticon>
<Emoticon id="127" tip="白酒">127.gif</Emoticon>
<Emoticon id="128" tip="汽水">128.gif</Emoticon>
<Emoticon id="129" tip="下雨">129.gif</Emoticon>
<Emoticon id="130" tip="多雲">130.gif</Emoticon>
<Emoticon id="131" tip="雪人">131.gif</Emoticon>
<Emoticon id="132" tip="星星">132.gif</Emoticon>
<Emoticon id="133" tip="女">133.gif</Emoticon>
<Emoticon id="134" tip="男">134.gif</Emoticon>
</Emoticons>

gifModel：

 internal class gifModel
        {
            public string gifImg { get; set; }
        }