tag:crieit.net,2005:https://crieit.net/tags/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97/feed Crieitでタグ「ツールチップ」に投稿された最近の記事 2019-07-09T09:28:41+09:00 https://crieit.net/tags/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97/feed tag:crieit.net,2005:PublicArticle/15217 2019-07-09T09:28:41+09:00 2019-07-09T09:28:41+09:00 https://crieit.net/posts/WPF-5d23dfb940064 <p>今回はツールチップによってヒントを表示するサンプルです。</p> <p>本当は何も説明しなくてもいいユーザーインターフェースを目指すべきなんですが、なかなかそうもいかない場合もありますよね。</p> <p>まあプラスアルファで付けるとそれはそれで喜ばれるものかもしれません。</p> <p>プログラムは前回のものを流用します。<br /> <a target="_blank" rel="nofollow noopener" href="https://www.doraxdora.com/blog/2017/10/14/post-2818/" target="_blank" rel="noopener noreferrer" data-blogcard="1">【WPF】データグリッドにコンボボックスを表示する</a></p> <h2 id="画面の修正"><a href="#%E7%94%BB%E9%9D%A2%E3%81%AE%E4%BF%AE%E6%AD%A3">画面の修正</a></h2> <p>MainWindow.xaml</p> <pre><code><Mah:MetroWindow x:Class="WpfApp1.MainWindow" 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:local="clr-namespace:WpfApp1" xmlns:Mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" xmlns:p="clr-namespace:WpfApp1.Properties" mc:Ignorable="d" Title="一覧" Height="350" Width="530" GlowBrush="{DynamicResource AccentColorBrush}" Icon="/WpfApp1;component/Resource/Cat.ico" BorderThickness="1" > <Window.Resources> <ResourceDictionary Source="/Style/StyleDic.xaml"/> </Window.Resources> <Grid Height="350" Width="530" Margin="0,1,-10,-33"> <Grid.Resources> <local:KindConverter x:Key="KindConv"/> </Grid.Resources> <Rectangle x:Name="rec_overlay" Width="530" Height="330" Style="{StaticResource rec-overlay}" /> <Mah:ProgressRing x:Name="loading_image" Style="{StaticResource pgr-normal}"/> <Label Content="名前：" Margin="10,10,0,0" Style="{StaticResource lb-normal}"/> <Image Margin="54,15,0,0" Style="{StaticResource img-question}"> <ToolTipService.ToolTip> <TextBlock Style="{StaticResource tkb-tooltip}" Text="{x:Static p:Resources.TL001}"/> </ToolTipService.ToolTip> </Image> <TextBox x:Name="search_name" Margin="76,12,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Style="{StaticResource MetroTextBox}"/> <Label Content="種別：" Margin="201,10,0,0" Style="{StaticResource lb-normal}"/> <Image Margin="245,15,0,0" Style="{StaticResource img-question}"> <ToolTipService.ToolTip> <TextBlock Style="{StaticResource tkb-tooltip}" Text="{x:Static p:Resources.TL002}"/> </ToolTipService.ToolTip> </Image> <ComboBox x:Name="search_kind" Margin="275,12,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="125" Style="{StaticResource MetroComboBox}" SelectedIndex="0" /> <Button x:Name="search_button" Content="検索" HorizontalAlignment="Left" Margin="432,12,0,0" VerticalAlignment="Top" Width="75" Click="search_button_Click" Style="{DynamicResource SquareButtonStyle}"/> <DataGrid Name="dataGrid" HorizontalAlignment="Left" Margin="10,43,0,0" Width="497" Height="225" Style="{StaticResource grid-normal}" > <DataGrid.Columns> <DataGridTemplateColumn IsReadOnly="True" Header="選択" Width="50"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTextColumn Binding="{Binding No}" ClipboardContentBinding="{x:Null}" Header="No" IsReadOnly="True" Width="40" /> <DataGridTextColumn Binding="{Binding Name}" ClipboardContentBinding="{x:Null}" Header="名前" IsReadOnly="False" Width="80"/> <DataGridTemplateColumn IsReadOnly="True" Header="性別" CellStyle="{StaticResource dgc-combo}" Width="50"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <ComboBox Name="cmbGender" ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid<span>}</span><span>}</span>, Path=DataContext.GenderList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" DisplayMemberPath="Name" SelectedValuePath="Cd" SelectedValue="{Binding Sex}" Width="50" Background="Transparent"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTextColumn Binding="{Binding Age, StringFormat=59:59}" ClipboardContentBinding="{x:Null}" Header="年齢" IsReadOnly="False" Width="40"/> <DataGridTemplateColumn IsReadOnly="True" Header="種別" CellStyle="{StaticResource dgc-combo}" Width="110"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <ComboBox Name="cmbKind" ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid<span>}</span><span>}</span>, Path=DataContext.KindList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" DisplayMemberPath="KindName" SelectedValuePath="KindCd" SelectedValue="{Binding Kind}" Width="110" Background="Transparent"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTextColumn Binding="{Binding Favorite}" ClipboardContentBinding="{x:Null}" Header="好物" IsReadOnly="False" Width="*"/> </DataGrid.Columns> </DataGrid> <Button x:Name="add_button" Content="追加" HorizontalAlignment="Left" Margin="10,273,0,0" VerticalAlignment="Top" Width="75" Height="30" Click="add_button_Click" Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="upd_button" Content="更新" HorizontalAlignment="Left" Margin="90,273,0,0" VerticalAlignment="Top" Width="75" Height="30" Click="upd_button_Click" Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="del_button" Content="削除" HorizontalAlignment="Left" Margin="170,273,0,0" VerticalAlignment="Top" Width="75" Height="30" Click="del_button_Click" Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="imp_button" Content="CSV読込" HorizontalAlignment="Left" Margin="250,273,0,0" VerticalAlignment="Top" Width="75" Height="30" Click="imp_button_Click" Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="exp_button" Content="CSV出力" HorizontalAlignment="Left" Margin="330,273,0,0" VerticalAlignment="Top" Width="75" Height="30" Click="exp_button_Click" Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="fld_button" Content="フォルダ参照" HorizontalAlignment="Left" Margin="410,273,0,0" VerticalAlignment="Top" Width="97" Height="30" Click="fld_button_Click" Style="{DynamicResource AccentedSquareButtonStyle}"> <ToolTipService.ToolTip> <TextBlock Style="{StaticResource tkb-tooltip}" Text="{x:Static p:Resources.TL003}"/> </ToolTipService.ToolTip> </Button> </Grid> </Mah:MetroWindow> </code></pre> <p>抜粋</p> <pre><code> <Image Margin="54,15,0,0" Style="{StaticResource img-question}"> <ToolTipService.ToolTip> <TextBlock Style="{StaticResource tkb-tooltip}" Text="{x:Static p:Resources.TL001}"/> </ToolTipService.ToolTip> </Image> </code></pre> <p>Imageタグの中に、ToolTipServiceのToolTipタグを入れ、更にテキストブロックでヒントを表示するようにしました。<br /> また、文言自体はリソースファイルから取得するようになっています。<br /> リソースを利用するために宣言部分に「xmlns:p」という属性を追加してあります。</p> <h2 id="画像の追加"><a href="#%E7%94%BB%E5%83%8F%E3%81%AE%E8%BF%BD%E5%8A%A0">画像の追加</a></h2> <p>![](https://www.doraxdora.com/wp-content/uploads/2017/11/questionMark-300x294.png" はてなアイコン</p> <p>ハテナマークの画像を作成し、プロジェクト直下の「Resource」ディレクトリに追加します。<br /> （Inkscape というドローソフトでサクッと作りました）</p> <h2 id="スタイル定義の追加"><a href="#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E5%AE%9A%E7%BE%A9%E3%81%AE%E8%BF%BD%E5%8A%A0">スタイル定義の追加</a></h2> <p>StyleDic.xaml（抜粋）</p> <pre><code> <!-- テキストブロック：通常 --> <Style x:Key="tkb-normal" TargetType="TextBlock"> <Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="TextWrapping" Value="Wrap" /> <Setter Property="FontSize" Value="14" /> </Style> <Style x:Key="tkb-tooltip" TargetType="TextBlock" BasedOn="{StaticResource tkb-normal}"> <Setter Property="Background" Value="#fefbdf" /> <Setter Property="Padding" Value="3, 3, 3, 3" /> <Setter Property="Margin" Value="0" /> </Style> <!-- イメージツールチップ --> <Style x:Key="img-question" TargetType="Image"> <Setter Property="Source" Value="/Resource/questionMark.png" /> <Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="Height" Value="18" /> <Setter Property="Width" Value="18" /> <Setter Property="ToolTipService.ShowDuration" Value="30000" /> </Style> </code></pre> <h2 id="リソースの追加"><a href="#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E8%BF%BD%E5%8A%A0">リソースの追加</a></h2> <p>ヒントで表示する文言をリソースに追加します。</p> <p>Resources.resx</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/10/WpfTooltip000.jpg" alt="リソースの追加" /></p> <p>文言を追加し、xamlからアクセスするためにアクセス修飾子を「public」に変更します。</p> <h2 id="起動してみる"><a href="#%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">起動してみる</a></h2> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/10/WpfTooltip001.jpg" alt="ツールチップ１" /></p> <p>名前ラベルの横にあるハテナマークをマウスオーバーした表示です。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/10/WpfTooltip002.jpg" alt="ツールチップ２" /></p> <p>こちらは種別ラベルの横のハテナマークをマウスオーバーした表示となります。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/10/WpfTooltip003.jpg" alt="ツールチップ３" /></p> <p>ついでにボタンにもつけてみました。</p> <h2 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h2> <p>簡単に実装できるうえ、スタイルを変更したり、表示時間を変更したりもできます。<br /> 表示するコンポーネントをテキストブロック以外にも出来そうなので、カスタマイズ性抜群ですね。</p> <p>興味のある方は色々試してみてください。</p> <p>ではでは。</p> <p> </p> doraxdora