I wish to display a ToolTip for an entry in a Listbox.
The Toolkit will contain a Textbox and a copy (larger) of the Image in the entry in the Listbox
I can get either the Text in the Textbox Or the Image to display.
The code which displays the image but not the text is
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="#EEFFFFFF" BorderBrush="#FFCCCCCC"
HorizontalAlignment="Center" VerticalAlignment="Center"
BorderThickness="1">
<Grid>
<StackPanel Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Image x:Name="img" ToolTipService.Placement="Top"
Source="{Binding Path=ImageUri}" Height="64" Stretch="Uniform" Width="64">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="scaleTrans"/>
</TransformGroup>
</Image.RenderTransform>
<Image.ToolTip>
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center" Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
This code is part of the code for which is used by a ListBox
The code below (as in the list above display the Image in the tooltip but not the Textbox
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center"Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
If you remove
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}" from <ToolTip
The Text works as expected but the Image now fails (as expected)
I have tried to
a) modify the original so the TextBlock binding point to the FTitle entry observable Collection driving the listbox entries
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=DataContext.FTitle, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
b) moved the datacontext in to Image
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=DataContext.Source, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Image}}}"/>
</Border>enter code here
Neither worked. (I did try many variations But none worked.
I would be grateful for either solution
{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}} will bind the UIElement (a ListBoxItem) as the DataContext for the tooltip. It seems you want the DataContext of the ListBoxItem in order to bind to properties of the underlying model. In which case, try changing your DataContext binding to be: {Binding Path=PlacementTarget.DataContext, RelativeSource={x:Static RelativeSource.Self}}
Related
I have listbox control with custom data template. I get the collection from webservice and bind that collection to listbox. When i scroll the list box top to bottom my listbox rows are changed and text are concatenate.
Please see the below images
This is my first screen
when scroll top to bottom once again
please compare two images my rows are changed
<Grid Margin="30,20,0,20" x:Name="MeGrid" Loaded="MeGrid_Loaded" Visibility="{Binding Path=_isMyMessage, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel >
<TextBlock HorizontalAlignment="Right" Foreground="#00c0d4" Margin="0,0,100,0" Text="{Binding Path=CreatedDate, Converter={StaticResource TimeSinceConverter}}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Grid Background="#ffffff" Height="auto" Width="auto" MaxWidth="300" MinWidth="50">
<StackPanel Background="White">
<RichTextBox Name="MeRich" Background="White" MaxHeight="600" Foreground="Red"
FontFamily="Segoe UI" Margin="10,0,10,0" VerticalAlignment="Center"
TextWrapping="Wrap" Height="auto"
Width="auto" MinWidth="50"
MaxWidth="300"
local:Properties.Html="{Binding Path=MessageText}">
</RichTextBox>
<readMore:Readmore Source="{Binding Path=MessageText}" Visibility="{Binding ActualHeight,
ElementName=MeRich, Converter={StaticResource ReadMoreVisibilityConverter}}" ></readMore:Readmore>
<!--<TextBlock Margin="10,0,10,0" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Height="auto" Width="auto" MinWidth="50" MaxWidth="300" Text="{Binding Path=MessageText}"
/>-->
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=AttachmentList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5">
<Button Click="Image_Download" Loaded="Button_Loaded" Tag="{Binding .}" Width="80" Height="80" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<ContentControl Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="/Resources/Drawable/c_image.png" Tag="{Binding .}" />
</Button>
<ProgressBar VerticalAlignment="Bottom" IsIndeterminate="true" Visibility="Collapsed" Style="{StaticResource CustomIndeterminateProgressBar}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
<Rectangle Margin="20,0,0,0" VerticalAlignment="Top" RadiusX="50" RadiusY="50" Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=UserPictureURL}"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</StackPanel>
</Grid>
I'm new in WPF and I can not work this one out hope you guys could help on this. The problem is that the DesignerItemTemplate is not working when its in the item control, I have try to use this directly to one item I can drag it around. Forgive me if the code look messy. Thanks in advance
<UserControl.Resources>
<ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type s:MoveThumb}">
<Rectangle Fill="Transparent" />
</ControlTemplate>
<!-- ResizeDecorator Template -->
<ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
<Grid>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Height="15" Width="130" Margin="0,-15,-81,0" IsHitTestVisible="False">
<TextBox Text="R101" BorderBrush="Transparent" IsHitTestVisible="False" Background="Transparent" Height="17" FontSize="7" Foreground="#FF6DF90C" VerticalContentAlignment="Stretch" MinHeight="1" HorizontalAlignment="Stretch" CharacterCasing="Upper" />
</StackPanel>
<s:ResizeThumb Height="1" Cursor="SizeNS" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<s:ResizeThumb Width="1" Cursor="SizeWE" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="1" Cursor="SizeWE" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
<s:ResizeThumb Height="1" Cursor="SizeNS" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNWSE" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNESW" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Right"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNESW" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNWSE" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
<!-- Designer Item Template-->
<ControlTemplate x:Key="DesignerItemTemplate" TargetType="{x:Type ContentControl}">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<s:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll"/>
<Control Template="{StaticResource ResizeDecoratorTemplate}"/>
<ContentPresenter Content="{TemplateBinding Content}"/>
</Grid>
</ControlTemplate>
</UserControl.Resources>
<panZoom:PanAndZoomViewer x:Name="panZoomViewer" Margin="2,2,2,45" ClipToBounds="True">
<!--<Canvas>-->
<Canvas x:Name="cnvImage" Background="Transparent">
<Image x:Name="imgCurrent" VerticalAlignment="Center" HorizontalAlignment="Center" />
<ItemsControl ItemsSource="{Binding InspectionItemList,Mode=TwoWay }">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Canvas.Top="{Binding Y,Mode=TwoWay}" Canvas.Left="{Binding X,Mode=TwoWay }"
Width="{Binding Width,Mode=TwoWay}" MinWidth="1"
Height="{Binding Height,Mode=TwoWay}" MinHeight="1"
Template="{Binding Mode=OneWay, Source={StaticResource DesignerItemTemplate}}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
<!--</Canvas>-->
</panZoom:PanAndZoomViewer>
Instead of Template="{Binding Mode=OneWay, Source={StaticResource DesignerItemTemplate}}" /> try this:
Template="{StaticResource DesignerItemTemplate}" />
If this doesn't help, could you please provide a little simpler example which demonstrates the problem and describe what you want to achive. It's not clear to me what you want to achive.
I found the problem! It was the InspectionItemList collection object that inheriting to a observable object. when I removed the obeservable in the object it works perfectly. Thanks Clemens and Stackoverflow this site really helps me a lot.
I'm using LongListSelector with JumpListStyle, when I click on group header it opens list with headers (image + text), but last images aren't loading. Here is a image:
So how can I make LongListSelector to load all images ?
I'm currently having the same problem ...
My JumpListStyle is an image.
The JumpList is in "List" mode, like you.
If I click on a header in the LongListSelector (with about 100 items) without scrolling all the list, the JumpList (containing 6 groups) is loading but with some images missing.
If I click on an JumpList item without image, and come back on the JumpList, the missing image is now loaded.
If I scroll all the LongListSelector items, the JumpList is ok now (all the images of the JumpList are loaded).
<Style x:Key="LongListSelectorJumpListStyle" TargetType="phone:LongListSelector">
<Setter Property="GridCellSize" Value="111,111"/>
<Setter Property="LayoutMode" Value="List" />
<Setter Property="Margin" Value="18,12,0,0"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{StaticResource SVodBackgroundBrush}" BorderBrush="Gray" BorderThickness="2"
Height="62" Width="286" Margin="20,20,20,20"
HorizontalAlignment="Left"
Visibility="{Binding EmptyGroup, Converter={StaticResource VisibilityInverseConverter}}">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="{Binding Key}" Visibility="{Binding Key, Converter={StaticResource ratingAvailableConverter}}" FontSize="30" Foreground="DarkGray" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Image Source="{Binding Key, Converter={StaticResource allRatingsConverter}}"/>
<Grid Visibility="{Binding Key, Converter={StaticResource ratingUnavailableConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto">
<TextBlock Text="?" FontSize="40" Foreground="DarkGray" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto"/>
</Grid>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Here is the code I have in XAML:
<!-- ItemsControl to print all the GDTs on the map as an overlay on tiles -->
<ItemsControl ItemsSource="{Binding GDTs, Mode=OneWay}" Grid.ColumnSpan="3" Grid.RowSpan="3" Panel.ZIndex="7">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas ClipToBounds="True" SnapsToDevicePixels="true"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding DistanceToLeft}"/>
<Setter Property="Canvas.Top" Value="{Binding DistanceToTop}"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<userControls:CommIndicator CommConfig="eDt" DtAntennaMode="eDirectional" DtAzimuth="{Binding Yaw}"/>
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding SourcePath}" Width="{Binding Width}"/>
<Rectangle Height="{Binding Height}" Width="{Binding Width}" Stroke="Orange" StrokeThickness="2"/>
<Ellipse Height="4" Width="4" Fill="Orange" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
All the bindings in there are working except for the one I just added within the UserControl (CommIndicator) : DtAzimuth="{Binding Yaw}".
The error I see in Snoop on that binding is this one : "System.Windows.Data Error: 40 : BindingExpression path error: 'Yaw' property not found on 'object' ''CommIndicator' (Name='')'. BindingExpression:Path=Yaw; DataItem='CommIndicator' (Name=''); target element is 'CommIndicator' (Name=''); target property is 'DtAzimuth' (type 'Int32')"
Is there a way to force th binding to check in the ItemsControl "currentItem" ?
EDIT 1:
Here is the XAML for my UserControl :
<UserControl x:Class="UserControls.CommIndicator"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
xmlns:userControls="clr-namespace:UserControls"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
SnapsToDevicePixels="True">
<UserControl.Resources>
<ResourceDictionary>
<userControls:CommConfigToVisibility x:Key="CommConfigToVisibility"/>
<userControls:AntennaModeToAngle x:Key="AntennaModeToAngle"/>
<userControls:AntennaModeToColor x:Key="AntennaModeToColor"/>
</ResourceDictionary>
</UserControl.Resources>
<Grid Width="100" Height="100">
<!-- Only use this for design reference -->
<!--<Grid Width="70" Height="70" HorizontalAlignment="Center" VerticalAlignment="Center">
<Ellipse Width="66" Height="66" Stroke="WhiteSmoke" StrokeThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Ellipse Width="66" Height="66" Fill="WhiteSmoke" StrokeThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.30"/>
<Ellipse Width="70" Height="70" Stroke="LimeGreen" StrokeThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Resources/BlackShadowTopView.png" Width="40"/>
<TextBlock Text="160" Margin="6" HorizontalAlignment="Center" TextAlignment="Center" Foreground="Black"/>
</Grid>-->
<!-- ADR Communication Circle Indicator -->
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100"
Visibility="{Binding CommConfig, Converter={StaticResource CommConfigToVisibility}, ConverterParameter={x:Static userControls:CommType.eDataRelay}}">
<Ellipse Width="100" Height="100" Stroke="Black" StrokeThickness="7"/>
<ed:Arc Width="99" Height="99" Fill="SlateGray" StartAngle="0" EndAngle="360" ArcThickness="5"/>
<ed:Arc Width="99" Height="99" Stretch="None" ArcThickness="6"
Fill="{Binding DrAntennaMode, Converter={StaticResource AntennaModeToColor}}"
StartAngle="{Binding DrAntennaMode, Converter={StaticResource AntennaModeToAngle}, ConverterParameter={x:Static userControls:AngleType.eStartAngle}}"
EndAngle="{Binding DrAntennaMode, Converter={StaticResource AntennaModeToAngle}, ConverterParameter={x:Static userControls:AngleType.eEndAngle}}"/>
<Grid.LayoutTransform>
<RotateTransform Angle="{Binding DrAzimuth}"/>
</Grid.LayoutTransform>
</Grid>
<!-- ADT/GDT Communication Circle Indicator -->
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="90"
Visibility="{Binding CommConfig, Converter={StaticResource CommConfigToVisibility}, ConverterParameter={x:Static userControls:CommType.eDataTransmitter}}">
<Ellipse Width="88" Height="88" Stroke="Black" StrokeThickness="7"/>
<ed:Arc Width="87" Height="87" Fill="SlateGray" StartAngle="0" EndAngle="360" ArcThickness="5"/>
<ed:Arc Width="87" Height="87" Stretch="None" ArcThickness="6"
Fill="{Binding DtAntennaMode, Converter={StaticResource AntennaModeToColor}}"
StartAngle="{Binding DtAntennaMode, Converter={StaticResource AntennaModeToAngle}, ConverterParameter={x:Static userControls:AngleType.eStartAngle}}"
EndAngle="{Binding DtAntennaMode, Converter={StaticResource AntennaModeToAngle}, ConverterParameter={x:Static userControls:AngleType.eEndAngle}}"/>
<Grid.LayoutTransform>
<RotateTransform Angle="{Binding DtAzimuth}"/>
</Grid.LayoutTransform>
</Grid>
</Grid>
</UserControl>
remove this:
DataContext="{Binding RelativeSource={RelativeSource Self}}"
from the UserControl, and add this:
<UserControl ...
x:Name="view">
And change all your bindings inside the usecontrol to use an ElementName, like this:
{Binding ElementName=view, Path=DtAntennaMode, Converter={StaticResource AntennaModeToColor}}"
Also, there seem to be a lot of converters going on there. I strongly suggest that you change all this to use a ControlTemplate and inside that you can put ControlTemplate.Triggers and remove the need for converters and DataContext hacks.
I would show over a mediaelement, a classic image play and when the pointer enter on the mediaelement this image disappears.
The mediaelement is like this and this works well. I post a portion of code:
<toolkit:DataGrid.RowDetailsTemplate>
<DataTemplate x:Name="DataTemplateDgRows">
<Border HorizontalAlignment="Stretch" CornerRadius="5" Background="Black" Margin="5" Padding="5">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="#509CD5" FontSize="20" Width="300" TextWrapping="Wrap" Text="{Binding NomeV}"/>
<Border BorderThickness="2" CornerRadius="2" BorderBrush="LightGray" >
<MediaElement Source="{Binding MediaUri}"
LoadedBehavior="Manual" Name="mediaElement1" ScrubbingEnabled="True"
Width="360" MouseLeftButtonDown="mediaElement1_MouseLeftButtonDown"
MouseEnter="mediaElement1_MouseEnter"
MouseLeave="mediaElement1_MouseLeave"
Loaded="mediaElement1_Loaded" />
</Border>
May someone can help me?
thanks
Something like this will get you started.
<toolkit:DataGrid.RowDetailsTemplate>
<DataTemplate x:Name="DataTemplateDgRows">
<Border HorizontalAlignment="Stretch" CornerRadius="5" Background="Black" Margin="5" Padding="5">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="#509CD5" FontSize="20" Width="300" TextWrapping="Wrap" Text="{Binding NomeV}"/>
<Border BorderThickness="2" CornerRadius="2" BorderBrush="LightGray" >
<Grid>
<Image Grid.ZIndex="1"
x:Name="image1"
Source="YourSource"/>
<MediaElement Grid.ZIndex="0"
Source="{Binding MediaUri}"
LoadedBehavior="Manual" Name="mediaElement1" ScrubbingEnabled="True"
Width="360" MouseLeftButtonDown="mediaElement1_MouseLeftButtonDown"
MouseEnter="mediaElement1_MouseEnter"
MouseLeave="mediaElement1_MouseLeave"
Loaded="mediaElement1_Loaded" />
</Grid>
</Border>
</StackPanel>
</Border>
<DataTemplate.Triggers>
<Trigger SourceName="mediaElement1" Property="IsMouseOver" Value="True">
<Setter TargetName="image1" Property="Visibility" Value="Collapsed"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</DataGrid.RowDetailsTemplate>