For a given Width I want to achieve
I'm building this xaml tree:
<ContentPresenter x:Name="CardContentPresenter"
Height="{Binding ActualWidth,
ElementName=CardContentPresenter,
Converter={StaticResource WidthToHeightConverter},
Mode=OneWay}"
VerticalAlignment="Center">
<Border x:Name="CardBorder">
<Border x:Name="ContentBorder"
Width="{Binding ActualWidth,
ElementName=CardBorder,
Converter={StaticResource WidthToContentWidthConverter},
Mode=OneWay}"
Height="{Binding ActualHeight,
ElementName=CardBorder,
Converter={StaticResource WidthToContentWidthConverter},
Mode=OneWay}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid>
<ContentPresenter x:Name="CardContentContentPresenter"
Height="{Binding ActualWidth,
ElementName=CardContentContentPresenter,
Converter={StaticResource HeightToWidthConverter},
Mode=OneWay}"
VerticalAlignment="Center">
<Grid />
</ContentPresenter>
</Grid>
</Border>
</Border>
</ContentPresenter>
but as I can see by a breakpoints inside the converters, an order of the Height/Width's calculations is messy (for example, the inner-inner-Height calculates before the inner-Width, so the value is incorrect).
How can I control an order of the properties' calculations? Or the whole my approach is wrong and there is another way to deal with it?
Related
I'm trying to understand the meaning of each part of controls in the XAML popup templates.
Here is the original code:
<Popup x:Name="PART_Popup"
AllowsTransparency="true"
Grid.ColumnSpan="2"
IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
Placement="Bottom">
<Themes:SystemDropShadowChrome x:Name="shadow"
Color="Transparent"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<Border x:Name="dropDownBorder"
BorderBrush="#FFEBEBEB"
BorderThickness="1"
CornerRadius="8"
Background="White">
<ScrollViewer x:Name="DropDownScrollViewer"
Template="{StaticResource UniversalScrollViewerTemplate}">
<Grid x:Name="grid"
RenderOptions.ClearTypeHint="Enabled">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Canvas x:Name="canvas"
HorizontalAlignment="Left"
Height="0"
VerticalAlignment="Top"
Width="0">
<Rectangle x:Name="opaqueRect"
Fill="{Binding Background, ElementName=dropDownBorder}"
Height="{Binding ActualHeight, ElementName=dropDownBorder}"
Width="{Binding ActualWidth, ElementName=dropDownBorder}" />
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter"
Grid.Row="1"
KeyboardNavigation.DirectionalNavigation="Contained"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
</ScrollViewer>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
I'm wondering what's the role of the Canvas Control canvas in the DropDownScrollViewer -> grid since its height and width are both 0.
Because the Grid allows ClearType text rendering. ClearType text has to be rendered to an opaque background.
Set the ClearTypeHint property to Enabled to indicate that a subtree is safe for ClearType text rendering. Do this only when you can be certain that the text is rendering to a fully opaque background.
https://msdn.microsoft.com/en-us/library/system.windows.media.renderoptions.cleartypehint(v=vs.110).aspx
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}}
I would like to change the margin of the list of ComboItems in global, not to each, to create a space between the ComboBox and the list of items.
I explain. I know that I can add styles to ComboItem with
<Style TargetType="ComboBoxItem">
But in my case, I want to change the margin around my list of items, not for each of them.
I don't know how to reach the property to modify this margin.
If you have any idea, thanks you
You can extract the default control template of the combobox like that or like this:
Then you tweak this part (I added the Margin on the ItemsPresenter):
<Popup x:Name="PART_Popup" AllowsTransparency="True" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter Margin="0,10,0,10" x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
You get this:
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.
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.