I have written following xaml code:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="200">
<StackPanel>
<ListBox Name="listBox">
<ListBoxItem Content="item1" />
<ListBoxItem Content="item2" />
<ListBoxItem Content="item3" />
</ListBox>
<TextBlock DataContext="{Binding ElementName=listBox, Path=SelectedItem}" Text="{Binding Content}" ToolTip="{Binding Content}" />
<TextBlock DataContext="{Binding ElementName=listBox, Path=SelectedItem}" Text="{Binding Content}">
<TextBlock.ToolTip>
<ToolTip Content="{Binding Content}"/>
</TextBlock.ToolTip>
</TextBlock>
</StackPanel>
</Window>
Why first tooltip always has the same text as it's parent TextBlock and second never changes it's content when I change selected item in listBox?
In the second example you're setting the ToolTip of the TextBlock to be a ToolTip. So you actually set the Content of the ToolTip to be another ToolTip. These would be the same as the first.
<TextBlock DataContext="{Binding ElementName=listBox, Path=SelectedItem}" Text="{Binding Content}" ToolTip="{Binding Content}" />
<TextBlock DataContext="{Binding ElementName=listBox, Path=SelectedItem}" Text="{Binding Content}">
<TextBlock.ToolTip>
<Binding Path="Content"/>
</TextBlock.ToolTip>
</TextBlock>
And these would pretty much be the same as the last
<Window.Resources>
<ToolTip x:Key="MyToolTip" Content="{Binding Content}"/>
</Window.Resources>
<TextBlock DataContext="{Binding ElementName=listBox, Path=SelectedItem}" Text="{Binding Content}" ToolTip="{Binding Source={StaticResource MyToolTip}}" />
<TextBlock DataContext="{Binding ElementName=listBox, Path=SelectedItem}" Text="{Binding Content}">
<TextBlock.ToolTip>
<ToolTip Content="{Binding Content}"/>
</TextBlock.ToolTip>
</TextBlock>
Related
I'm using materialDesign open source UI library to develop, for I want to use data template to display, the code is as follows, but the display style of the interface is not correct, the display logic is also not correct
<materialDesign:Card>
<TabControl VerticalContentAlignment="Top" materialDesign:ColorZoneAssist.Mode="PrimaryMid"
ItemsSource="{Binding IndexMenus}" Style="{StaticResource MaterialDesignNavigationRailTabControl}">
<b:Interaction.Triggers>
<b:EventTrigger EventName="SelectionChanged">
<b:InvokeCommandAction Command="{Binding NavigateCommand}"
CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=TabControl}}" />
</b:EventTrigger>
</b:Interaction.Triggers>
<TabControl.ContentTemplate>
<DataTemplate>
<TabItem Margin="0,25,0,0">
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center"
Kind="{Binding Icon}" />
<TextBlock HorizontalAlignment="Center" Text="{Binding Title}" />
</StackPanel>
</TabItem.Header>
</TabItem>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</materialDesign:Card>
This is what it looks like now
If the data template is not used, he will show this
You should be using ItemTemplate instead of ContentTemplate
<TabControl.ItemTemplate>
<DataTemplate>
<TabItem Margin="0,25,0,0">
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center"
Kind="{Binding Icon}" />
<TextBlock HorizontalAlignment="Center" Text="{Binding Title}" />
</StackPanel>
</TabItem.Header>
</TabItem>
</DataTemplate>
</TabControl.ItemTemplate>
Lets say I have a sample ComboBox defined like this.
<ComboBox ItemsSource="{Binding Path=Bikes}"
HorizontalAlignment="Stretch">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Ellipse Fill="{DynamicResource AccentColorBrush}"
Height="15"
Width="15"
VerticalAlignment="Center"/>
<TextBlock Text="{Binding Type}"
Margin="15, 0, 0, 0"
FontWeight="SemiBold"
Foreground="{DynamicResource AccentColorBrush}"
VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
What I would like to do is to wrap it in a Style, but expose the ItemSource property of ComboBox and Text property within DataTemplate, so that I can Bind to different properties each time I use ComboBox.
I can suggest you to create a combo-box style that will select the template of its combo-item using the ViewModel-First approach. So there will be number of data-templates each of wich will relate to specific view-model.
<Window x:Class="WpfViewConstructorCall.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:local="clr-namespace:WpfViewConstructorCall"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="525"
Height="350"
mc:Ignorable="d">
<Window.Resources>
<!--Combo-item data-template wich is defining the final item view-->
<DataTemplate x:Key="ComboItemContentTemplate">
<StackPanel Orientation="Horizontal">
<Ellipse Width="15"
Height="15"
VerticalAlignment="Center"
Fill="GreenYellow" />
<TextBlock Margin="15, 0, 0, 0"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="Red"
Text="{Binding}" />
</StackPanel>
</DataTemplate>
<!--Combo-item data-template wich relates to ItemA view-model-->
<DataTemplate DataType="{x:Type local:ItemA}">
<ContentControl Content="{Binding Name}"
ContentTemplate="{StaticResource ComboItemContentTemplate}" />
</DataTemplate>
<!--Combo-item data-template wich relates to ItemB view-model-->
<DataTemplate DataType="{x:Type local:ItemB}">
<ContentControl Content="{Binding Kind}"
ContentTemplate="{StaticResource ComboItemContentTemplate}" />
</DataTemplate>
<!--Combo-item data-template wich relates to ItemC view-model-->
<DataTemplate DataType="{x:Type local:ItemC}">
<ContentControl Content="{Binding Type}"
ContentTemplate="{StaticResource ComboItemContentTemplate}" />
</DataTemplate>
<!--main Combo-item data-template-->
<DataTemplate x:Key="ComboItemDataTemplate">
<ContentControl Content="{Binding}" />
</DataTemplate>
<!--Combo style-->
<Style x:Key="ComboBoxStyle"
TargetType="ComboBox">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="ItemTemplate" Value="{StaticResource ComboItemDataTemplate}" />
</Style>
</Window.Resources>
<Grid>
<Grid.DataContext>
<local:GridDataContext />
</Grid.DataContext>
<StackPanel>
<!--Combo(s) with specific source definition-->
<ComboBox x:Name="A"
DisplayMemberPath="Name"
ItemsSource="{Binding ItemsA}"
SelectedValuePath="Name"
Style="{StaticResource ComboBoxStyle}" />
<ComboBox x:Name="B"
DisplayMemberPath="Kind"
ItemsSource="{Binding ItemsB}"
SelectedValuePath="Kind"
Style="{StaticResource ComboBoxStyle}" />
<ComboBox x:Name="C"
DisplayMemberPath="Type"
ItemsSource="{Binding ItemsC}"
SelectedValuePath="Type"
Style="{StaticResource ComboBoxStyle}" />
</StackPanel>
</Grid></Window>
In case you will have an additional combo-item's view model you will add a data-template which will relate to that specific view-model and will define its view.
Let me knnow if you need more examples.
Best regards.
I have this xaml code on one of the windows in my app:
<phone:PanoramaItem x:Name="panoramaItemSend" Header="{Binding LocalizedResources.send, Source={StaticResource LocalizedStrings}}" >
<StackPanel Margin="12,0,0,0">
<TextBlock Text="{Binding LocalizedResources.recipientEmail, Source={StaticResource LocalizedStrings}}" />
<TextBox InputScope="EmailUserName" Text="{Binding SendModel.Email, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="100" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256" Height="105" TextWrapping="Wrap">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding LocalizedResources.amount, Source={StaticResource LocalizedStrings}}" />
<TextBox x:Name="txtSendAmount" InputScope="Number" Text="{Binding SendModel.Amount, Mode=TwoWay}" Margin="-12,0,0,0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" TabIndex="101" MaxLength="20" TextChanged="TextBox_TextChanged" >
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding SendModel.AmountFiatStr}" Margin="0,-15,0,5" Foreground="Gainsboro"/>
<TextBlock Text="{Binding LocalizedResources.label, Source={StaticResource LocalizedStrings}}" />
<TextBox Text="{Binding SendModel.Label, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="102" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding LocalizedResources.message, Source={StaticResource LocalizedStrings}}" />
<TextBox Text="{Binding SendModel.Message, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="103" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<Button x:Name="btnSend" Content="{Binding LocalizedResources.send, Source={StaticResource LocalizedStrings}}" Style="{StaticResource OrangeButton}" Tap="btnSend_Tap" TabIndex="104"/>
</StackPanel>
I want to create a popup when I trigger btnSend's Tap handler - btnSendTap
My popup should have this grid full of accounts that I already know how to add programatically:
<Grid Margin="15,0,0,21">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel x:Name="AccountsInfo" Grid.Row="0">
</StackPanel>
<StackPanel Grid.Row="1">
<local:RateChart x:Name="rateChart" Height="324" Margin="-12,25,0,0" Width="417" />
</StackPanel>
</Grid>
Have a look at the PopUp control.
Hope that is what you are looking for. :)
I created a tabcontrol with TabItem dynamic, and each TabItem with a button to close it, but just want that button visible when the TabItem is selected.
But I can not access the control inside the DataTemplate
<TabControl Name="dynamicTab" ItemsSource="{Binding}" Margin="0,85,0,0">
<TabControl.Resources>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<DockPanel>
<Button
Focusable="False"
BorderThickness="0"
Background="Transparent"
BorderBrush="Transparent"
Padding="-4"
Height="10"
Width="10"
Name="btnDelete" Visibility="Hidden" DockPanel.Dock="Right" Margin="5,0,0,0" Click="btnDelete_Click"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}">
<Image Name="imgButtonClose" Source="/Recursos;component/Imagens/close16x16.png" Height="10" Width="10"/>
</Button>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}" />
</DockPanel>
</DataTemplate>
</TabControl.Resources>
</TabControl>
Just use the binding on the IsSelected property of ancestoral TabItem:
<BooleanToVisibilityConverter x:Key="boolToVisibilityConverter"/>
...
<Button ...
Name="btnDelete"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=IsSelected, Converter={StaticResource boolToVisibilityConverter}">
...
</Button>
If you have no problems with this binding:
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}"
then the proposed code should work.
I'm working with a WPF application to manage our main software's versions. This application has a ListBox, and I set the ListBox.DataTemplate to each ListBoxItem has a Label and 2 Buttons inside it.
The following code shows my ListBox code:
<ListBox Grid.Row="0" SelectedItem="{Binding Path=SelectedVersion}" ItemsSource="{Binding Path=PatchList, Mode=TwoWay}" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}"
SelectionMode="Single" IsSynchronizedWithCurrentItem="True" Margin="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Path=VersionNumber}" HorizontalAlignment="Left" Foreground="#FFFFFF" FontSize="19" />
<Button Grid.Column="1" Width="25" Height="25" Template="{StaticResource OnMouseOverListBoxitem}" ToolTip="Release" Command="{Binding Path=DataContext.ReleaseVersionCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" HorizontalAlignment="Right" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}" CommandParameter="{Binding}">
<ContentControl Template="{StaticResource Release}" />
</Button>
<Button Grid.Column="2" Width="25" Height="25" Template="{StaticResource OnMouseOverListBoxitem}" ToolTip="Trash" Command="{Binding Path=DataContext.DeleteVersionCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" HorizontalAlignment="Right" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}" CommandParameter="{Binding}">
<ContentControl Template="{StaticResource Trash}" />
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem is that I would like to show the label and the buttons ONLY for the Selected ListBoxItem.
By the way, I'm using bindings, and if you see some different code it's because I'm also using MahApp.Metro for Windows8-style.
Any suggestions?
Thank you.
try this one.
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter1" />
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding Fnts}" Grid.Row="0" SelectedItem="{Binding Path=SelectedVersion}"
SelectionMode="Single" IsSynchronizedWithCurrentItem="True" Margin="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding}" />
<Button Content=" X " Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected, Converter={StaticResource BooleanToVisibilityConverter1}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>