Show "pop up window" when is mouser over listBox item - wpf

I bind observable collection on listBox. I have data tempate on listbox item. It consit one image control and som textBlock.
If is mouse over on some listBox item I would like achieve this behavior:
Show PopUp/ToolTip (some "rectangle" with controls) and bind values from listBox current item.
And on textBox in item data template I have style, I would like change color of text in textBlock, for example from black to green.
Style is here:
<Style x:Key="FriedNickStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="2,2,2,2"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Foreground" Value="Black"/>
</Style>
Sory for my english, I have problem how describe this behavior correct. I try many thing but any of them doesn’t work good.
Here is it my style:
<DataTemplate x:Key="FriendListBoxItemTemplate">
<Grid Name="RootLayout">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Image Margin="4,4,4,2" Grid.Column="0">
<Image.Source >
<MultiBinding Converter="{StaticResource avatarConverter}">
<Binding Path="ProfilePhoto"></Binding>
<Binding Path="StatusInfo.IsLogged"></Binding>
</MultiBinding>
</Image.Source>
</Image>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock
Text="{Binding Path=Nick}"
Style="{StaticResource FriedNickStyle}"
Grid.Column="0" Grid.Row="0">
</TextBlock>
</Grid>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--SHOW SOME POP UP WINDOW and bind properties from ITEM (VALUE)-->
<!--Change color of textBlock-->
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
Thank everybody who help me.

Well, I found this turorial, this article, by the MSDN and another stack overflow's question.
Basically, here's how:
<Popup Margin="10,10,0,13"
Name="Popup1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="194"
Height="200"
IsOpen="True"> // change this to open it
<TextBlock Name="McTextBlock" Background="LightBlue" >
This is popup text
</TextBlock>

Related

Swiching the Stackpanel in single ViewModel Using Back/Next Button WPF

I have a WPF, with Form with multiple user required questions. I have created 2 Stackpanels which have similar layout, first form (Stackpanel) will let the user to fill up information.While second form (Stackpanel) would be preview form for the user before he submits.
XAML Code
<Window x:Class="NinjaLIB.View.SSOEMWarrantyButtonExtension"
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:NinjaLIB.View"
xmlns:lex="http://wpflocalizeextension.codeplex.com"
lex:LocalizeDictionary.DesignCulture="en"
lex:ResxLocalizationProvider.DefaultAssembly="NinjaLIB"
lex:ResxLocalizationProvider.DefaultDictionary="Resources"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
DataContext="{Binding Path=RMAView, Source={StaticResource Locator}}"
mc:Ignorable="d"
Title="Request RMA" Height="600" Width="1000"
xmlns:mvvmlight="http://www.galasoft.ch/mvvmlight"
xmlns:converter="clr-namespace:NinjaLIB.Converter"
WindowStartupLocation="CenterScreen" ResizeMode="NoResize">
<i:Interaction.Triggers>
<!--<i:EventTrigger EventName="Closed">
<mvvmlight:EventToCommand Command="{Binding GetRMAWindowClosed}" PassEventArgsToCommand="True" />
</i:EventTrigger>-->
<!--<i:EventTrigger EventName="Loaded">
<mvvmlight:EventToCommand Command="{Binding GetWarrantyWindowLoaded}" PassEventArgsToCommand="True" />
</i:EventTrigger>-->
</i:Interaction.Triggers>
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Some QUestions asked to the User-->
<Grid Grid.Row="2">
<!--View Form Fill-->
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ViewState}" Value="FormFillViewState">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
**<!--Some QUestions asked to the User-->**
</StackPanel >
</ScrollViewer>
**<!--View Preview Form-->**
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ViewState}" Value = "PreviewFillState" >
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
**<!--Some QUestions asked to the User-->**
</StackPanel>
</ScrollViewer>
</Grid>
<Grid Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Buttons-->
<Button Grid.Row="0" Content="Next"
IsEnabled="{Binding IsConnected}"
Command="{Binding NextCommandBtn}"
FontWeight="Normal"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="30"
Width="80"
Margin="780,0,0,2"
Padding="3,0"/>
<Button Grid.Row="0" Content="Back"
IsEnabled="{Binding IsConnected}"
Command="{Binding BackCommandBtn}"
FontWeight="Normal"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="30"
Width="80"
Margin="420,0,0,2"
Padding="3,0"/>
</Window>
==============
View Model Section Code
==============
private RMAViewModel RMAView;
private readonly ResourceManager rm;
public RMAViewModel()
{
rm = new ResourceManager("NinjaLIB.Properties.Resources", Assembly.GetExecutingAssembly());
}
//Properties for the Window (Date and Text) for FormFillViewState
//Properties for the Window (Date and Text) for PreviewFillState
==============
I wanted some help with view Model code, where if I click NextCommandBtn all the data will appear as filled up form from first stackpanel view and when I select BackCommandBtn i can edit the form.
You can think about it like this:
You have two views (StackPanels) and only one can be displayed at a time.
So in your view-model, you need a property that tells you which view is active. A simple bool property for each view would work. Since there are only two views, you could technically just use a single property, but using two will make your XAML data binding a little easier.
Examples:
IsFormActive
IsPreviewActive
In your XAML, you need to control the Visibility property of your two StackPanel controls based on your IsFormActive and IsPreviewActive properties in your view-model. You can do this with a value converter, specifically the BooleanToVisibilityConverter.
<StackPanel Visibility="{Binding IsFormActive,
Converter={StaticResource BooleanToVisibilityConverter}">
...
</StackPanel>
<StackPanel Visibility="{Binding IsPreviewActive,
Converter={StaticResource BooleanToVisibilityConverter}">
...
</StackPanel>
And back in your view-model you can control the state of IsFormActive and IsPreviewActive when the next and back buttons are clicked, etc.
I hope this helps you get an idea of how to proceed.

XAML in WP8.1: Child Element Styles

I have a Grid and TextBlocks. I want to style all TextBlocks within the Grid. So I do this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="0,0,0,15" />
</Style>
</Grid.Resources>
<StackPanel Grid.Column="0">
<TextBlock Text="myText" Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock Text="myText" Style="{StaticResource TitleTextBlockStyle}" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="123456" Style="{StaticResource TitleTextBlockStyle}" Foreground="{ThemeResource PhoneAccentBrush}" />
<TextBlock Text="123456" Style="{StaticResource TitleTextBlockStyle}" Foreground="{ThemeResource PhoneAccentBrush}" />
</StackPanel>
</Grid>
1) It's not working. TextBlocks don't get any Margins. Why?
2) How can I set the Style and Foreground properties of TextBlocks in the <Grid.Resources> tag?
1) It's not working. TextBlocks don't get any Margins. Why?
It's not working because you're assigning the style "TitleTextBlockStyle" to the TextBlocks. So the implicit style you defined in Grid.Resources doesn't come in to play. Remove the Style="{StaticResource TitleTextBlockStyle}" parts from the TextBlocks, and your margins will appear.
2) How can I set the Style and Foreground properties of TextBlocks in the <Grid.Resources> tag?
The same as you set everything else:
<Setter Property="Foreground" Value="AliceBlue"/>
or if you have a more elaborate brush:
<Setter Property="Foreground">
<Setter.Value>
<!-- Whatever brush you want -->
<Setter.Value/>
</Setter>
I assume that with "Set the style property of TextBlocks", you actually want your new style to inherit from an already defined style. In that case you can base your new style on an already existing style:
<Style TargetType="TextBlock"
BasedOn="{StaticResource StyleToInheritFrom}">
or, in your case, presumably:
<Style TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
<Setter Property="Margin" Value="0,0,0,15" />
</Style>
The full thing would look something like:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
<Setter Property="Margin" Value="0,0,0,15" />
<Setter Property="Foreground" Value="{ThemeResource PhoneAccentBrush}"/>
</Style>
</Grid.Resources>
<StackPanel Grid.Column="0">
<TextBlock Text="myText" />
<TextBlock Text="myText" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="123456" />
<TextBlock Text="123456" />
</StackPanel>
</Grid
What sort of margins are you looking for? If you are looking for left right margins, its due to your margin declaration. Declare like this:
<object Margin="left,top,right,bottom"/>
- or -
<object Margin="left,top"/>
- or -
<object Margin="thicknessReference"/>
Right now, you're just adding a bottom margin. You could also just add
Margin="15"
which will be interpreted as a thickness reference and set all values to 15

How to show the scrollbar in expander when content overflows the window

I'm using two expander with TextBox one after another. During writing text the TextBox dynamically changes height. When size of TextBox is higher then parent window the scrollbar isn't shown. Here is example:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="150" Width="150">
<Grid Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*" Name="GridRow1"></RowDefinition>
<RowDefinition Height="*" Name="GridRow2"></RowDefinition>
</Grid.RowDefinitions>
<Expander Grid.Row="0">
<TextBox TextWrapping="Wrap" VerticalScrollBarVisibility="Auto"/>
</Expander>
<Expander Grid.Row="1">
<TextBox TextWrapping="Wrap" VerticalScrollBarVisibility="Auto"/>
</Expander>
</Grid>
</Window>
I need to set max height of expander to half size of parent window (window is resizable). The scrollbar should be displayed if the text is longer than half size of the window. Other, when both expander are closed they should be close to each other on the top.
Scrollbar works well when in row definition is asterisk (*) but closed expander aren't not together at the top.
Apply your requirement in a Style DataTrigger for RowDefinition
<Grid Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Name="GridRow1">
<RowDefinition.Style>
<Style TargetType="{x:Type RowDefinition}">
<Setter Property="Height"
Value="*" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=expanderOne,
Path=IsExpanded}"
Value="False">
<Setter Property="Height"
Value="Auto" />
</DataTrigger>
</Style.Triggers>
</Style>
</RowDefinition.Style>
</RowDefinition>
<RowDefinition Name="GridRow2"
Height="*" />
</Grid.RowDefinitions>
<Expander x:Name="expanderOne"
Grid.Row="0">
<TextBox TextWrapping="Wrap"
VerticalScrollBarVisibility="Auto" />
</Expander>
<Expander Grid.Row="1">
<TextBox TextWrapping="Wrap"
VerticalScrollBarVisibility="Auto" />
</Expander>
</Grid>

How do I Show/Hide a Grid Row and Grid Splitter based on a Toggle Button?

Currently I have a toggle button that is bound to a boolean property (DualLayout) in my code behind. When the boolean is set to True, then I want my second row in my grid (and grid splitter) to hide and have the first row take up the entire space of the grid. Once the boolean is set to False, I want the grid splitter and bottom row to appear.
Here is a snippet of my xaml
<ToggleButton Name="toggleLayout" Margin="66,1,0,1" Width="25" HorizontalAlignment="Left" IsChecked="{Binding DualLayout}" Checked="toggleLayout_Clicked" Unchecked="toggleLayout_Clicked">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type ToggleButton}">
<Image Source="Images/PlayHS.png"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="Receive and Transmit Windows Split."/>
</Trigger>
<Trigger Property="IsChecked" Value="false">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type ToggleButton}">
<Image Source="Images/PauseHS.png"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="Receive and Transmit Windows Combined."/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Grid x:Name="transmissionsGrid" Margin="0,28,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" MinHeight="100" />
</Grid.RowDefinitions>
<transmission:TransmissionsControl x:Name="transmissionsReceive" TransmissionType="Receive" Margin="0,0,0,5" />
<GridSplitter Name="gridSplitter1" Grid.Row="0" Background="White" Cursor="SizeNS" Height="4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Foreground="Firebrick" />
<transmission:TransmissionsControl x:Name="transmissionsTransmit" TransmissionType="Transmit" Grid.Row="1" />
</Grid>
This is untested, but I believe it should work.
First, if you want your first row to take up the whole space, you'll want to define your RowDefinitions as
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" /> <!-- Edit: Removed MinHeight="100" -->
</Grid.RowDefinitions>
For showing/hiding the controls, you'll need to bind their Visibility property either to your DualLayout property (if the class properly implements INotifyPropertyChanged), or (perhaps more simply) to the IsChecked property of the ToggleButton.
For instance (the same applies to the GridSplitter):
<!-- EDIT: Added MinHeight="100" here instead -->
<transmission:TransmissionsControl x:Name="transmissionsTransmit"
TransmissionType="Transmit"
Grid.Row="1"
MinHeight="100"
Visibility={Binding ElementName=toggleLayout,
Path=IsChecked,
Converter={StaticResource boolToVis}}" />
At some level above the controls in question (here I am doing it at the window level) you need to add built-in BooleanToVisibilityConverter resource:
<Window.Resources>
<BooleanToVisibilityConverter x:Key="boolToVis" />
</Window.Resources>

How to center a WPF CheckBox within a ListBoxItem

I have a ListBox that uses an ItemContainerStyle. I have tried everything I can think of to get a CheckBox control to center vertically and horizontally. Any ideas?
<ListBox
IsSynchronizedWithCurrentItem="True"
Height="Auto" Width="Auto" DockPanel.Dock="Top"
ItemContainerStyle="{StaticResource lbcStyle}" />
<Style TargetType="ListBoxItem" x:Key="lbcStyle">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource editable}"/>
</Trigger>
</Style.Triggers>
<Setter Property="ContentTemplate" Value="{StaticResource nonEditable}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/> '//i have tried stretch here also
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
CheckBoxes get this style:
<Style x:Key="editorCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="MinWidth" Value="67" />
<Setter Property="Height" Value="25" />
<Setter Property="Margin" Value="5,0,5,0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
Here are editable / non-editable:
<DataTemplate x:Key="editable">
<Border x:Name="brdEditable" Width="Auto" HorizontalAlignment="Stretch">
<DockPanel x:Name="dpdEditable" LastChildFill="True" Width="Auto" Height="Auto">
<Grid x:Name="grdEditable" Width="Auto" Height="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="25" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
'...
<CheckBox x:Name="chkActive" Grid.Column="7" Height="25" Style="{StaticResource editorCheckBox}" ToolTip="Is Construction Active?" IsEnabled="true" Validation.ErrorTemplate="{StaticResource validationTemplate}">
<CheckBox.IsChecked>
<Binding Path="Active">
<Binding.ValidationRules>
<DataErrorValidationRule></DataErrorValidationRule>
<ExceptionValidationRule></ExceptionValidationRule>
</Binding.ValidationRules>
</Binding>
</CheckBox.IsChecked>
</CheckBox>
'...
<ContentControl Name="ExpanderContent" Visibility="Collapsed" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="14"></ContentControl>
</Grid>
</DockPanel>
</Border>
</DataTemplate>
<DataTemplate x:Key="nonEditable">
<Border x:Name="brdNonEditable" Width="Auto" HorizontalAlignment="Stretch">
<DockPanel Width="Auto" Height="25">
<Grid Width="Auto" Height="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="25" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="chkActive" Grid.Column="7" Height="25" Style="{StaticResource editorCheckBox}" ToolTip="Is Construction Active?" IsEnabled="false" Validation.ErrorTemplate="{StaticResource validationTemplate}">
<CheckBox.IsChecked>
<Binding Path="Active">
<Binding.ValidationRules>
<DataErrorValidationRule></DataErrorValidationRule>
<ExceptionValidationRule></ExceptionValidationRule>
</Binding.ValidationRules>
</Binding>
</CheckBox.IsChecked>
</CheckBox>
<Label Content="calCompDate" Style="{StaticResource editorLabelList}" Grid.Column="8" ToolTip="{Binding Path= CompDate}" />
</Grid>
</DockPanel>
</Border>
</DataTemplate>
And thanks so much to everyone who has tried to help me solve this!
Try setting the ScrollViewer.HorizontalScrollBarVisibility property to "Disabled" on the ListBox. This forces the item containers to have a fixed width; otherwise, they can have any horizontal size, and horizontal alignment cannot be calculated sensibly.
Vertical alignment should be a matter of modifying the ListBoxItem style, as per Donnelle's answer.
Edit: In your code snippets, the CheckBox is inside a Grid which is inside a DockPanel which is inside a Border. Which element are you trying to center exactly? Are you sure the rest of them don't interfere? Here's how it looks for me with my suggestion and HorizontalContentAlignment="Center", and only the checkbox in the data template:
One more edit: I copy/pasted your grid/dockpanel/border exactly as they appear in the snippets you pasted, and the result is exactly the same - items centered horizontally.
I've had the same issue to. Have you tried setting "HorizontalAlignment" directly on the ListBoxItem in the style? (not HorizontalContentAlignment)
Have you tried setting HorizontalContentAlignment to "Stretch" on the ListBox itself? I believe this is necessary to make each ListBoxItem fill the width of the ListBox.
Setting the height on the ListBoxItem style-- rather than the checkbox-- does what I think you're after.
The checkbox is aligned top-left. For a quick and dirty, I have updated the margin on the checkbox to 4,3,0,0 on a row heigh of 20. May need to be adjusted depending upon your row height and if you want a buffer on the left. The margin attribute can get you out of odd format situations if you don't have time to write your own template or use other controls/containers.

Resources