i have one problem with tooltip.
I want to add templated tooltip to button with some information inside.
Here the button with tooltip, which datacontext bounded to some viewmodel:
<fluent:Button DataContext="{Binding NewConnections, Source={StaticResource Locator}}" Command="{Binding AddCloudStorageAccount}" Header="Add Account">
<fluent:Button.LargeIcon>
<Image Source="pack://application:,,,/Icons;component/UI/v1/add_account.png" Width="48"/>
</fluent:Button.LargeIcon>
<fluent:Button.ToolTip>
<ToolTip DataContext="{Binding UserInput.AddAccountsButtonInfo, Source={StaticResource Locator}}" Style="{StaticResource ButtonTooltip}"></ToolTip>
</fluent:Button.ToolTip>
</fluent:Button>
Style:
<Style TargetType="ToolTip" x:Key="ButtonTooltip">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="LightYellow" BorderThickness="0.5" BorderBrush="Maroon">
<StackPanel Orientation="Vertical" Margin="3">
<TextBlock x:Name="_txtText" Text="{Binding Title}"></TextBlock>
<TextBlock x:Name="_txtDescription" Margin="0 10 0 0" Text="{Binding Description}"></TextBlock>
<TextBlock x:Name="_txtHotKeyDescription" Margin="0 10 0 0" Text="{Binding HotKeyDescription}"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I set some breakpoints to see if viewmodel is accessed. And it's ok. But properties like Title not accessed at all and i see only empty rectangle without any text
Do someone have some ideas?
Just resolved it(set datacontext in border). Maybe someone will be interested in:
<Style TargetType="ToolTip" x:Key="ButtonTooltip">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="LightYellow" BorderThickness="0.5" BorderBrush="Maroon" DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToolTip}}}">
<StackPanel Orientation="Vertical" Margin="3">
<TextBlock x:Name="_txtText" Text="{Binding Title}"></TextBlock>
<TextBlock x:Name="_txtDescription" Margin="0 10 0 0" Text="{Binding Description}"></TextBlock>
<TextBlock x:Name="_txtHotKeyDescription" Margin="0 10 0 0" Text="{Binding HotKeyDescription}"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Related
Hi I need to solve a problem between the TextBox and the treeview. When I select the TreeView after the TextBox I don't receive the LostFocus Event (for the TextBox) why?
I have tried to play a lot with Focusable and the focusableManager but .... it didn't helped me.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Visibility="{Binding VariableA, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource BoolToHiddenConverter}}
<TextBox Width="78" FocusManager.IsFocusScope="True"
PreviewTextInput="HatchingDistanceBox_PreviewTextInput"
Name="TextBoxAWhoShouldLostFocus" BorderThickness="0.5"
BorderBrush="White" MinHeight="30" Height="30" Text="{Binding SelectedFamille.VariableA}"
utilities:InputBindingsManager.UpdatePropertySourceWhenEnterPressed="TextBox.Text">
</TextBox>
<TreeView Name="TreeView_After" ItemsSource="{Binding FirstGeneration}" Focusable="True" Grid.ColumnSpan="3" Grid.Row="2" Grid.Column="0" AllowDrop="True" Background="#282828" Margin="15, 0,0,0" >
<TreeView.Style>
<Style TargetType="{x:Type TreeView}">
<EventSetter Event="GotFocus" Handler="TreeViewItem_GotFocus"></EventSetter>
</Style>
</TreeView.Style>
<i:Interaction.Behaviors>
<utilities:TreeViewSelectionBehavior SelectedItem="{Binding SelectedFamille}"/>
</i:Interaction.Behaviors>
<TreeView.Resources>
<DataTemplate x:Key="NormalTemplate">
<StackPanel Orientation="Horizontal" Name="StrategyNamePanel" Mouse.PreviewMouseDown="StrategyNamePanel_MouseDown" Width="200" Background="#282828" Focusable="True" FocusManager.IsFocusScope="True">
<TextBox Name="StrategyNameBox" FontWeight="Normal" FocusManager.IsFocusScope="True" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}" MinHeight="30" Height="30" BorderThickness="0" utilities:InputBindingsManager.UpdatePropertySourceWhenEnterPressed="TextBox.Text"></TextBox>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="EditTemplate">
<StackPanel Orientation="Horizontal" Name="NamePanel" Focusable="True" Mouse.PreviewMouseDown="NamePanel_MouseDown" Width="200" Background="{StaticResource DarkGrey}" FocusManager.IsFocusScope="True">
<TextBox Name="NameBox" FontWeight="Normal" BorderBrush="{StaticResource DarkOrange}" FocusManager.IsFocusScope="True" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}" MinHeight="30" Height="30" utilities:InputBindingsManager.UpdatePropertySourceWhenEnterPressed="TextBox.Text" ></TextBox>
</StackPanel>
</DataTemplate>
</TreeView.Resources>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<EventSetter Event="GotFocus" Handler="TreeViewItem_GotFocus"></EventSetter>
<EventSetter Event="TreeViewItem.DragOver" Handler="TreeView_After_DragOver"/>
<EventSetter Event="TreeViewItem.Drop" Handler="TreeView_After_Drop"/>
<EventSetter Event="TreeViewItem.MouseMove" Handler="TreeView_After_MouseMove"/>
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
The LostFocus from the textbox work when I click everywhere except in the TreeView
2) The lostFocus work if I first select a parent in the treeView and then a Treeview Item.
3)When I first select a treeViewItem and Then an Another treeViewItem there is no more LostFocus Event.
Why????
I have a list box Bound to XML data correctly , but i have multiple Tree Views inside this listbox which you can select item for every one of them!
i want single item selecting from all of these tree views. which every one of those are inside an unique expander.
if you look at my xml data ,consider i have 2 groups inside xml , i can select item for both of those groups in listbox which now they are different treeviews in my ui , and i want single item selecting for all this listbox items.
<ListBox Background="Transparent" BorderThickness="0" SelectedValue="{Binding SelectedMenuValue,Mode=TwoWay}" ItemsSource="{Binding Path=Items,Source={StaticResource XmlSourceMenu}}">
<ListBox.Resources>
<DataTemplate DataType="{x:Type revoxml:Group}">
<Expander Header="{Binding Title}">
<TreeView ItemsSource="{Binding Menus}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding}">
<StackPanel Orientation="Horizontal" Margin="10 0">
<fa:ImageAwesome Height="30" Width="30" VerticalAlignment="Center" Margin="5" Icon="{Binding Icon}" />
<TextBlock Text="{Binding Title}" Height="30" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Expander>
</DataTemplate>
<DataTemplate DataType="{x:Type revoxml:SubMenu}">
<StackPanel Orientation="Horizontal" Margin="10 0">
<fa:ImageAwesome Height="30" Width="30" VerticalAlignment="Center" Margin="5" Icon="{Binding Icon}" />
<TextBlock Text="{Binding Title}" Height="30" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.Resources>
</ListBox>
for easier understanding data for this listbox comming from xml file like this :
<MainMenu>
<Group Title="title">
<SubMenu Icon="Inbox" Title="inbox" Tag="38"/>
<SubMenu Icon="CommentingOutline" Title="New Message" Tag="37"/>
<SubMenu Icon="Tachometer" Title="Archive" Tag="39"/>
<Menu Icon="CartArrowDown" Title="purchases" >
<SubMenu Icon="CartArrowDown" Title="new" Tag="26"/>
<SubMenu Icon="CartPlus" Title="list" Tag="28"/>
</Menu>
</Group>
<SubMenu Icon="InfoCircle" Title="info" Tag="6000" />
<SubMenu Icon="Close" Title="close" Tag="0"/>
</MainMenu>
this should solve it ! but you need to implement your own selected item, or you could change groupboxes to expander and items control to tree view to match your code
<Style TargetType="StackPanel" x:Key="HoverStackPanelStyle">
<Setter Property="Background" Value="Transparent"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
<ScrollViewer>
<HeaderedItemsControl Background="Transparent" ItemsSource="{Binding Path=Items,Source={StaticResource XmlSourceMenu}}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type revoxml:SubMenu}">
<StackPanel Orientation="Horizontal" Margin="10 0" Style="{StaticResource HoverStackPanelStyle}">
<fa:ImageAwesome Height="30" Width="30" VerticalAlignment="Center" Margin="5" Icon="{Binding Icon}" />
<TextBlock Text="{Binding Title}" FontFamily="{StaticResource nazanin}" Height="30" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</DataTemplate>
<HierarchicalDataTemplate DataType="{x:Type revoxml:Menu}" ItemsSource="{Binding Menus}">
<GroupBox Header="{Binding Title}" Margin="0 5">
<ItemsControl ItemsSource="{Binding Menus}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type revoxml:SubMenu}">
<StackPanel Name="StackPanel" Orientation="Horizontal" Margin="10 0" Style="{StaticResource HoverStackPanelStyle}">
<fa:ImageAwesome Height="30" Width="30" VerticalAlignment="Center" Margin="5" Icon="{Binding Icon}" />
<TextBlock Text="{Binding Title}" FontFamily="{StaticResource nazanin}" Height="30" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
</GroupBox>
</HierarchicalDataTemplate>
</ItemsControl.Resources>
</HeaderedItemsControl>
</ScrollViewer>
i've got a ListView with item-binding which looks like this:
<ListView x:Name="DetailsAZList" ItemsSource="{Binding AZEntries.AZEntries, Mode=OneWay}" >
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="LightGray" BorderBrush="DimGray" BorderThickness="2" CornerRadius="0" Margin="0 2 0 10">
<Grid MinHeight="140" HorizontalAlignment="Stretch">
<StackPanel Margin="10 0" Orientation="Vertical">
<TextBlock Text="{Binding ToDoBezeichnung, Mode=OneWay}"/>
<!--UserName Unter umständen auch anzeigen, falls Arbeitszeiten anderer User mit aufgeführt werden-->
<!--<TextBlock Text="{Binding UserName, Mode=OneWay}"/>-->
<TextBlock Text="{Binding start, Mode=OneWay}"/>
<TextBlock Text="{Binding finished, Mode=OneWay}"/>
<TextBlock Text="{Binding Kostenpflichtig, Mode=OneWay}"/>
<controls:WrapPanel Orientation="Horizontal" BlockSize="40">
<!-- Example from: stackoverflow.com/questions/28223693/how-to-bind-buttons-in-listview-datatemplate-to-commands-in-viewmodel-mvvmligh -->
<Button Command="{Binding ElementName=DetailsAZList, Path=DataContext.PlayCommand}"
CommandParameter="{Binding}"
Margin="0 0 10 0">
<SymbolIcon Symbol="Play"/>
</Button>
<Button Command="{Binding ElementName=DetailsAZList, Path=DataContext.PauseCommand}"
CommandParameter="{Binding}"
Margin="0 0 10 0">
<SymbolIcon Symbol="Pause"/>
</Button>
<Button Command="{Binding ElementName=DetailsAZList, Path=DataContext.StopCommand}"
CommandParameter="{Binding}"
Margin="0 0 10 0">
<SymbolIcon Symbol="Stop"/>
</Button>
<Button Command="{Binding ElementName=DetailsAZList, Path=DataContext.EditCommand}"
CommandParameter="{Binding}"
Margin="0 0 10 0">
<SymbolIcon Symbol="Edit"/>
</Button>
<Button Command="{Binding ElementName=DetailsAZList, Path=DataContext.DeleteCommand}"
CommandParameter="{Binding}" >
<SymbolIcon Symbol="Delete"/>
</Button>
</controls:WrapPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0 2 0 0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
what i'd like to do, is adding a topmost item, which is either unbound, nor uses the Datatemplate, sth. like this:
<ListView x:Name="DetailsAZList" ItemsSource="{Binding AZEntries.AZEntries, Mode=OneWay}" >
<!-- Here comes the relevant Item -->
<ListViewItem x:Name="TopmostUnboundItem">
<Grid HorizontalAlignment="Strech" Background="LightGray">
<TextBox Text="Add Entry"/>
</Grid>
</ListViewItem>
<!-- Thats it -->
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="LightGray" BorderBrush="DimGray" BorderThickness="2" CornerRadius="0" Margin="0 2 0 10">
<Grid>...</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0 2 0 0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Is this somehow possible, without having to change my specified Collection to ObservableCollection for adding the Item and then using a TemplateSelector? I was hoping to avoid this, since I have the feeling this would be a bit of an overkill for only one single Item.
Use Header and put your content into ListView.HeaderTemplate. Since you only want to put 1 item ontop, no need to change your collection.
I'm trying to have my TabItem Collapsed or Hidden. I've tried many solutions and none have worked. The Tab Item still remains
If I may get some guidance please.
one solution I've Tried
<TabItem >
<TabItem.Header>
<StackPanel Visibility="Collapsed">
<TextBlock Text="Transactions" />
</StackPanel>
</TabItem.Header>
<panes:Transactions />
</TabItem>
private Visibility statementVisibility;
public Visibility StatementVisibility { get { return statementVisibility; } set { statementVisibility = value; OnPropertyChanged("StatementVisibillity"); } }
Changed "Collapsed" to StatementVisibility and still nothing.
UPDATE:
After poking around, I've found a link to the TabItems that I think may play a factor.
Generic.xaml
<ListBox Foreground="#FFF" Name="TabSelector" Grid.Row="2" ItemsSource="{Binding Path=Items, ElementName=Tabs}">
<ListBox.Background>
<SolidColorBrush Color="#333"/>
</ListBox.Background>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0 0 0 1" SnapsToDevicePixels="False" BorderBrush="#22000000">
<TextBlock FontSize="14" Height="30" VerticalAlignment="Center" Margin="0" Padding="6" Text="{Binding Header}"/>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Border Grid.Column="1" Grid.Row="2" Background="White" BorderThickness="0">
<ContentPresenter Name="PART_TabbedFormPresenter"
Content="{Binding TabbedForm, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shell:ActionScreenControl}}}"
DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type shell:ActionScreenControl}}}">
<ContentPresenter.Resources>
<Style TargetType="TabItem">
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Border>
Loanview.xaml.cs
<shell:ActionScreenControl.TabbedForm>
<TabControl>
<TabItem......./>
<TabItem......./>
<TabItem >
<TabItem.Header>
<StackPanel Visibility="Collapsed">
<TextBlock Text="Transactions" />
</StackPanel>
</TabItem.Header>
<panes:Transactions />
</TabItem>
</TabControl>
</shell:ActionScreenControl.TabbedForm>
Try setting the Visibility property on the actual TabItem itself:
<TabControl>
<TabItem Visibility="Collapsed">
<TabItem.Header>
<StackPanel>
<TextBlock Text="Transactions" />
</StackPanel>
</TabItem.Header>
<panes:Transactions />
</TabItem>
</TabControl>
Ahhhh... you want to data bind. Then you'll need to use a BooleanToVisibilityConverter element and a bool property:
<TabItem Visibility="{Binding YourBoolProperty,
Converter={StaticResource BooleanToVisibilityConverter}">
<TabItem.Header>
<StackPanel>
<TextBlock Text="Transactions" />
</StackPanel>
</TabItem.Header>
<panes:Transactions />
</TabItem>
See the IValueConverter Interface page on MSDN to see how to use a converter.
This is from production code and it works
<TabItem Visibility="{Binding Path=MyGabeLib.CurUser.DisplayTSQL, Converter={StaticResource bvc}}">
<TabItem.Header>
<TextBlock Style="{StaticResource HeaderTextBlockStyle}">TSQL</TextBlock>
</TabItem.Header>
<ScrollViewer VerticalScrollBarVisibility="Visible">
<TextBox Text="{Binding Path=MyGabeLib.Search.CurrentTSQL, Mode=OneWay}" IsReadOnly="True"
TextWrapping="Wrap" FontFamily="Courier New"/>
</ScrollViewer>
</TabItem>
If you are returning Visibility then you would not need a converter
Try with a simple TextBlock - I suspect you have a datacontext problem
I want to show a list of items horizontally and be able to select from this list of items - I have tried using a listview and changing the item template per some posts on stack and I have this:
<ListView Height="Auto" HorizontalAlignment="Left" Margin="24,0,0,0" Name="MachinesListView" VerticalAlignment="Top" Width="1455" Background="#FFF0F0F0" ItemsSource="{Binding Machines}" BorderBrush="#FFF0F0F0" Grid.ColumnSpan="2" Grid.Row="2" SelectionChanged="MachinesListView_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Height" Value="175"/>
<Setter Property="Width" Value="275"/>
<Setter Property="Margin" Value="5,5,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="10">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Machine.MachineId}" TextAlignment="Center" Width="Auto" Foreground="#FF639A70" FontSize="19"/>
<TextBlock Text="{Binding Machine.Name}" TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" />
<Image Source="/URM;component/Images/slot_machine-512.png" Height="60" Width="60" />
<TextBlock Text="{Binding Machine.Description}" TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" Margin="0, 5, 0, 0"/>
<TextBlock TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" Margin="0, 5, 0, 0">
<Run Text ="Actual: "/>
<Run Text ="{Binding Actual, StringFormat=' {0:c}'}"/>
</TextBlock>
<TextBlock TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" Margin="0, 5, 0, 0">
<Run Text ="OverShort: "/>
<Run Text ="{Binding OverShort, StringFormat=' {0:c}'}"/>
</TextBlock>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
This works well...I get the overall look and feel that I want from this but only selecting the first item causes the selectionchanged event to fire...
I thought about implementing the items as buttons instead but I thought there might be a more proper way of dealing with this.
Set Background to Transparent on outer most border of ControlTemplate.
<Border BorderBrush="Gray" Background="Transparent"
BorderThickness="2" CornerRadius="10">
By default it's {x:Null} which is not responsive to mouse events.
You will see that item gets selected only in case you click over image
or any control present in template but when you click on empty area
within border, selectionChange event doesn't fire since it is
unresponsive to mouse events (specifically MouseClick in your case). Setting background to Transparent will make it responsive to all mouse events.
Refer to this for more details - {x:Null} Vs. Transparent.