Q&A
解決済
総合スコア52
投稿2017/02/03 12:51
Xamlでこんなことはできますか？
if文やswitch文のように条件によって使うタグをごっそり変えたいです。
<〇〇〇 値> <値="1"> <TextBlock ・・・・・/> <Button ・・・・・・/> <値="2"> <CheckBox ・・・・/> <値=その他> <Combobox ・・・・/> <Button ・・・・/> <TextBox ・・・/> </〇〇〇>
回答3件
0
ベストアンサー
かんたんなのは表示／非表示を切り替える方法でしょうか。
XML
1<CheckBox Name="cbox" /> 2 3<Canvas> 4 <Canvas.Style> 5 <Style TargetType="Canvas"> 6 <Setter Property="Visibility" Value="Collapsed" /> 7 <Style.Triggers> 8 <DataTrigger Binding="{Binding ElementName=cbox, Path=IsChecked}" Value="True"> 9 <Setter Property="Visibility" Value="Visible" /> 10 </DataTrigger> 11 </Style.Triggers> 12 </Style> 13 </Canvas.Style> 14 15 <TextBlock Text="チェックされてるよ" /> 16</Canvas> 17 18<Canvas> 19 <Canvas.Style> 20 <Style TargetType="Canvas"> 21 <Setter Property="Visibility" Value="Visible" /> 22 <Style.Triggers> 23 <DataTrigger Binding="{Binding ElementName=cbox, Path=IsChecked}" Value="True"> 24 <Setter Property="Visibility" Value="Collapsed" /> 25 </DataTrigger> 26 </Style.Triggers> 27 </Style> 28 </Canvas.Style> 29 30 <Label Content="チェックされてないよ" /> 31</Canvas> 32
あとは同様にStyleのDataTriggerからTemplateをごっそり差し替えるかでしょうね。
投稿2017/02/05 03:37
総合スコア425
0
こんにちは。
Triggerを使ってください。
条件によってはDataTemplateのDataTypeも使えます。
投稿2017/02/03 13:39
総合スコア4791
0
if文やswitch文のように条件によって使うタグをごっそり変えたいです。
ガラッと入れ替えるならTabControlがおすすめです^^
ヘッダーを消せばTabControlだと気が付かれません（デザイン時は出しておくとやりやすい）
選択をListViewで作って、NavigationView風メニューとかでよく使っています。
ナビゲーションビュー - Windows apps | Microsoft Learn
SelectedIndex等にバインドして遷移させれば、ウィザード的なものも簡単に作れます。
最終的には各タブ用ViewModel・DataTemplate・ContentControl等に変更し、TabControlを使わなくなることもありますが、小規模・開発初期は楽ですし移行もスムーズです。
<値=その他>
というのはswitch文のdefaultのような意味でしょうか？（あんまり用途が思いつかないけど^^;
レイアウトによってはTabControlの裏に隠しておくとか、トリガーでVisibilityを変えるとかやりようはありますが、何とか省コードでデザインもしやすいものができました^^
xml
1<Window 2 x:Class="Q64512.MainWindow" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:Q64512" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 Width="800" 9 Height="450" 10 ThemeMode="System" 11 mc:Ignorable="d"> 12 <UniformGrid Rows="1"> 13 14 <GroupBox Margin="4" Header="NavigationView風"> 15 <DockPanel> 16 <!-- 17 TabControlを左タブにもできるが、見栄えの調整が大変 18 ListViewを使うのがおすすめ^^ 19 --> 20 <ListView 21 x:Name="listView" 22 FontFamily="Segoe Fluent Icons" 23 FontSize="20" 24 SelectedValuePath="Tag"> 25 <ListView.ItemContainerStyle> 26 <Style BasedOn="{StaticResource {x:Type ListViewItem}}" TargetType="ListViewItem"> 27 <Setter Property="MinWidth" Value="0" /> 28 </Style> 29 </ListView.ItemContainerStyle> 30 <ListViewItem Content="" Tag="Home" /> 31 <ListViewItem Content="" Tag="Calc" /> 32 <ListViewItem Content="" Tag="Calender" /> 33 <ListViewItem Content="" Tag="Paint" /> 34 </ListView> 35 36 <!-- TabControlらしさをなくすが、デザイン時にはタブも見えていて欲しい --> 37 <TabControl 38 Padding="0" 39 d:ItemContainerStyle="{x:Null}" 40 BorderThickness="0" 41 SelectedValue="{Binding SelectedValue, ElementName=listView}" 42 SelectedValuePath="Header"> 43 <!-- タブを消す --> 44 <TabControl.ItemContainerStyle> 45 <Style BasedOn="{StaticResource {x:Type TabItem}}" TargetType="TabItem"> 46 <Setter Property="Visibility" Value="Collapsed" /> 47 </Style> 48 </TabControl.ItemContainerStyle> 49 <TabItem Header="Home"> 50 <TextBlock FontSize="48" Text="Home" /> 51 </TabItem> 52 <TabItem Header="Calc"> 53 <TextBlock FontSize="48" Text="Calc" /> 54 </TabItem> 55 <TabItem Header="Calender"> 56 <TextBlock FontSize="48" Text="Calender" /> 57 </TabItem> 58 <TabItem Header="Paint"> 59 <TextBlock FontSize="48" Text="Paint" /> 60 </TabItem> 61 </TabControl> 62 </DockPanel> 63 </GroupBox> 64 65 <GroupBox Margin="4" Header="switch default"> 66 <StackPanel> 67 <ListBox x:Name="listBox" SelectedIndex="0" SelectedValuePath="Content"> 68 <ListBox.ItemsPanel> 69 <ItemsPanelTemplate> 70 <WrapPanel /> 71 </ItemsPanelTemplate> 72 </ListBox.ItemsPanel> 73 <ListBoxItem Content="1" /> 74 <ListBoxItem Content="2" /> 75 <ListBoxItem Content="3" /> 76 <ListBoxItem Content="4" /> 77 </ListBox> 78 79 <!-- 80 デザイン時のためとswitch default挙動用 81 実際に表示するのは↓のContentControl 82 通常Visual Treeには同じインスタンスを複数回突っ込めない 83 CollapsedにすることでContentControlに表示できる 84 --> 85 <TabControl 86 x:Name="tabControl" 87 d:Visibility="Visible" 88 SelectedValue="{Binding SelectedValue, ElementName=listBox}" 89 SelectedValuePath="Header" 90 Visibility="Collapsed"> 91 92 <!-- 値="1" --> 93 <TabItem Header="1"> 94 <StackPanel> 95 <TextBlock FontWeight="Bold" Text="1" /> 96 <TextBlock Text="TextBlock" /> 97 <Button Content="Button" /> 98 </StackPanel> 99 </TabItem> 100 101 <!-- 値="2" --> 102 <TabItem Header="2"> 103 <StackPanel> 104 <TextBlock FontWeight="Bold" Text="2" /> 105 <CheckBox Content="CheckBox" /> 106 </StackPanel> 107 </TabItem> 108 </TabControl> 109 110 <Border> 111 <Border.Resources> 112 113 <!-- 値=その他（TabItemと少し離れるのが難点か） --> 114 <StackPanel x:Key="default"> 115 <TextBlock FontWeight="Bold" Text="Other" /> 116 <ComboBox SelectedIndex="0">ComboBox</ComboBox> 117 <Button Content="Button" /> 118 <TextBox Text="TextBox" /> 119 </StackPanel> 120 </Border.Resources> 121 122 <!-- 123 実行時に表示される部分 デザイン時は「その他」確認に使う 124 TabControlに無いSelectedValueがバインドされた時、SelectedContentはnull 125 --> 126 <ContentControl Margin="4" d:Content="{StaticResource default}" Content="{Binding SelectedContent, ElementName=tabControl, TargetNullValue={StaticResource default}}" /> 127 </Border> 128 </StackPanel> 129 </GroupBox> 130 </UniformGrid> 131</Window>
デザイン時
実行時
こういうのもあるけど、そういう意味ではないですね？^^;
↑でも駆使していますが「デザイン時データ」は大変便利です^^
XAML デザイナーでデザイン時データを使用する - Visual Studio (Windows) | Microsoft Learn
c# - Does XAML have a conditional compiler directive for debug mode? - Stack Overflow
投稿2026/07/20 15:28
総合スコア10290
あなたの回答
tips
プレビュー
