😹 📧 🐷 Windows Phoneの連絡先サーチャー 👩🏻‍🏫 👩‍🌾 👨‍🍳

Windows Phoneの連絡先サーチャー

人々はWindows Phoneの開発に関する記事に興味があるので、私は自分でそれを公開しようとします。コードはほとんどありません（すべてのコードはGitHubで入手できます）。

1つのプロジェクトでは、ネイティブのWindows Phoneメールクライアントと同じ連絡先検索コントロールが必要でした。既製の実装が見つからなかったため、独自の実装を作成する必要がありました。（自動補完を備えたComboBoxについては知っていますが、それだけでは不十分であり、ネイティブクライアントではすべてが可能な限り見えるはずです）

要件から-外観は完全にカスタマイズ可能でなければなりません。遅延検索を実行する機能（たとえば、Webサービスを介して検索する場合）。まあ、使いにくいです。
概略的に、私はこのように表示しようとしました：

リストボックスにはすでに選択されている連絡先があります。また、SearchedContactsの下に表示される連絡先の検索が実行される文字を入力するときに、TextBoxもあります。削除ボタンもサポートされています（TextBoxにこれ以上文字がない場合、最後に選択されたアイテムが削除されます）
コードは次のようになります。

Xaml要素コード

<Grid> <Grid.RowDefinitions> <RowDefinition Height="*" MaxHeight="70" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <ListBox x:Name="ItemsListBox" ItemTemplate="{TemplateBinding ItemTemplate}" SelectionMode="Single"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <toolkit:WrapPanel /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ContentControl x:Name="Header" Content="{TemplateBinding HeaderText}" ContentTemplate="{TemplateBinding HeaderTemplate}" /> <TextBox x:Name="SearchTextBox" Background="Transparent" BorderBrush="Transparent" CaretBrush="WhiteSmoke" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStyle="{TemplateBinding FontStyle}" Foreground="{TemplateBinding Foreground}" Style="{StaticResource ClearTextBoxStyle}"/> </ListBox> <Border Grid.Row="1" Width="480" Height="2" VerticalAlignment="Top" Background="White" /> <ListBox x:Name="Selector" Grid.Row="2" HorizontalAlignment="Stretch" Background="{TemplateBinding PopupBackground}" BorderBrush="{TemplateBinding PopupBorderBrush}" BorderThickness="{TemplateBinding PopupBorderThickness}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" ItemTemplate="{TemplateBinding PopupItemTemplate}" Opacity="{TemplateBinding Opacity}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionMode="Single" /> </Grid>

使用例：

コード：

使用例

 <controls2:ContactsChooser x:Name="chooser" Grid.Row="1" Margin="0,24,0,0" HeaderText="Partipants" ItemsSource="{Binding InvitedUsers}" PopupBackground="Transparent" PopupBorderBrush="Transparent" SearchCommand="{Binding SearchCommand}" SearchItemsSource="{Binding SearchedUsers}"> <controls2:ContactsChooser.HeaderTemplate> <DataTemplate> <TextBlock Margin="0,0,12,0" FontFamily="Segoe WP Semibold" FontSize="20" Foreground="Gray" Text="{Binding}" /> </DataTemplate> </controls2:ContactsChooser.HeaderTemplate> <controls2:ContactsChooser.PopupItemTemplate> <DataTemplate> <Grid Margin="0,0,0,12"> <Grid.ColumnDefinitions> <ColumnDefinition Width="99" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Canvas Width="99" Height="99" HorizontalAlignment="Left" VerticalAlignment="Top" Background="#FF0A1016" UseLayoutRounding="False"> <Path Canvas.Left="8" Canvas.Top="10" Width="83" Height="97" Data="F1M81.886,88.911L81.989,88.911C81.989,88.911,81.964,89.135,81.887,88.915z M36.533,88.911L46.325,88.911 44.515,88.935C41.769,88.955,38.229,88.924,36.59,88.911z M41.727,39.437C41.727,39.437 47.627,45.341 47.627,45.341 47.627,45.341 41.727,75.253 41.727,75.253 41.727,75.253 35.827,45.341 35.827,45.341 35.827,45.341 41.727,39.437 41.727,39.437z M55.337,39.02C61.072,39.02 65.137,39.02 65.137,39.02 71.971,39.02 76.42,45.063 77.511,51.66 77.511,51.66 79.541,65.1 80.963,81.029 81.386,85.766 81.643,87.737 81.793,88.523L81.886,88.911 46.325,88.911 46.383,88.91C47.474,88.886 48.198,88.845 48.218,88.779 49.761,83.805 51.266,75.913 52.317,67.729 54.112,53.747 55.199,39.02 55.337,39.02z M18.236,39.02C18.236,39.02 22.18,39.02 27.997,39.02 28.199,39.02 34.143,88.906 35.759,88.906L36.533,88.911 1.013,88.911C1.013,88.911 5.862,51.66 5.862,51.66 6.71,44.699 11.402,39.02 18.236,39.02z M41.578,1.981C50.442,1.981 57.627,9.172 57.627,18.042 57.627,26.913 50.442,34.104 41.578,34.104 32.715,34.104 25.53,26.913 25.53,18.042 25.53,9.172 32.715,1.981 41.578,1.981z" Fill="#3A3F43" /> </Canvas> <Image Width="99" Height="99" /> <TextBlock Grid.Column="1" Margin="12,0,0,0" VerticalAlignment="Center" Text="{Binding FullName}" /> </Grid> </DataTemplate> </controls2:ContactsChooser.PopupItemTemplate> <controls2:ContactsChooser.ItemTemplate> <DataTemplate> <StackPanel Margin="0,0,12,0" Orientation="Horizontal"> <TextBlock Text="{Binding FullName}" /> <TextBlock Text=";" /> </StackPanel> </DataTemplate> </controls2:ContactsChooser.ItemTemplate> </controls2:ContactsChooser>

MVVMパターンがサポートされ、検索ロジックは完全にViewModelにあります。

 SearchCommand = new RelayCommand(o => { var searchedName = o.ToString().ToLower(); SearchedUsers.Clear(); foreach (var user in Users.Where(u => u.FirstName.ToLower().Contains(searchedName) || u.LastName.ToLower().Contains(searchedName))) { SearchedUsers.Add(user); } });

ここで、Webサービスにアクセスするメソッドを挿入し、データを受信するときにObservableCollectionに入力できます。

コードはきれいではありませんが、OpenSourceはそのために役立ちます。提案があれば、それを改善してください。

突然質問が発生した場合-質問、私は喜んで答えます。

Windows Phoneの連絡先サーチャー

Windows Phoneの連絡先サーチャー

More articles: