UWP 大爆炸你個錘子

原文: UWP 大爆炸你個錘子 今天看到   叫我藍火火  s的  UWP中實作大爆炸效果（一）  ，我也來說一下我的app 【 小薇自然語言處理

】實作的大爆炸技術。

看一下效果先。

我的控件是基于wrappanel的，正如藍火火說的，這樣看來是很整齊，他不喜歡這樣的。不過我倒是覺得還行。哈哈

程式員也是衆口難調，哈

大爆炸技術主要分為兩個大部分：

1. 分詞，把句子拆分成單詞

2. 顯示，将單詞顯示出來

1. 分詞

小薇NLP的分詞技術采用了Boson NLP和Tencent AI雙重引擎，可以在設定界面自由切換，實時生效/

 具體怎麼實作的封裝和調用，這裡就不多做介紹了。有需要的私信聯系。

以Boson NLP為例，看一下把伺服器傳回來的資料解析一下

private async Task OnSegTag()
        {
            var resBosonSegTag = await BosonAIHelper.WordSegAndTag(textInput.Text.Trim());
            if (resBosonSegTag != null && resBosonSegTag.tag.Count > 0)
            {
                for (int i = 0; i <= resBosonSegTag.tag.Count - 1; i++)
                {
                    NLPWord nlp = new NLPWord
                    {
                        word = resBosonSegTag.word[i],
                        width = resBosonSegTag.word[i].Length * 20,
                        bgcolor = PosTagHelper.GetPosColor_Boson(resBosonSegTag.tag[i])
                    };
                    SegTagItems.Add(nlp);
                }
            }
        }      

 那個width沒用，就先擱置哪裡了。

word：單詞和标點之類的

bgcolor：每一類單詞的背景顔色

2. 顯示

由于使用了wrappanel，是以就簡單了許多。

隻需要自定義一下模闆即可。

<Page.Resources>
        <DataTemplate x:Key="WordsTemplate">
            <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{Binding bgcolor}">
                <TextBlock Text="{Binding word}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,6,0,0"/>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>      

<ListView Grid.Row="2"
                    x:Name="WrapPanelContainer"
                    IsItemClickEnabled="True"
                    SelectionMode="Extended"
                    Style="{StaticResource ListViewAppleStyle}"
                    ItemsSource="{x:Bind Mode=OneWay, Path=SegTagItems}"
                    ItemTemplate="{StaticResource WordsTemplate}">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <controls:WrapPanel />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                            <Setter Property="VerticalContentAlignment" Value="Stretch" />
                            <Setter Property="Height" Value="36" />
                            <Setter Property="MinHeight" Value="36" />
                            <Setter Property="Padding" Value="2"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>      

然後就可以開心的顯示了