WidthConverter is not trigger when GroupBox has been resize - wpf

GroupBox has an auto column width. I can't think anymore why WidthConverter is not triggered when GroupBox has been resized. Any alternatives?
The goal is to display 5 rows and 5 columns always. When user resized the window, the column width must also resized. TIA!
<GroupBox Grid.Column="0" Grid.ColumnSpan="7" Grid.Row="10" x:Name="GbSerial"
Template="{StaticResource GbSerialProgrammed}">
<GroupBox.Header>
<TextBlock TextDecorations="Underline" FontWeight="Bold" FontSize="24" HorizontalAlignment="Center" TextAlignment="Center"
Text="{lgg:Lgg Path=AllSerialNumberProgrammed}"/>
</GroupBox.Header>
<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<ItemsControl x:Name="IcSerialNumbers" Background="White" Tag="{Binding ElementName=GbSerial, Path=ActualWidth}"
ItemsSource="{Binding AllSerialNumberProgrammed, UpdateSourceTrigger=PropertyChanged}"
helper:ItemsControlHelper.ScrollToLastItem="True"
FontSize="24" Height="250" >
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Height" Value="50"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Width" Value="{Binding ElementName=GbSerial,
Path=ActualWidth, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True,
Mode=OneTime, Converter={StaticResource WidthConverter},
ConverterParameter=5}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" FlowDirection="LeftToRight" Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl >
</ScrollViewer>
</GroupBox>

Mode OneTime, as name implies, means it is invoked only once when it starts off.

Related

Thousands of radio buttons cause low performance in WPF

I need to create an user control that displays the wafer map, so I used a ListBox with uniform grid and each cell represents a die in the wafer. The problem I got is that when there are too many dies, for example, 100*100 uniformgrid, will be super slow to display, and also the scroller view is slow.
Below is my code:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid VirtualizingPanel.VirtualizationMode="Recycling" VirtualizingPanel.IsVirtualizing="True" x:Name="WaferMapGrid" Columns="{Binding MapColumnCount}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Rows="{Binding MapRowCount}" Background="AliceBlue" RenderTransformOrigin="0.5,0.5" Loaded="WaferMapGrid_Loaded">
<UniformGrid.LayoutTransform>
<ScaleTransform x:Name="WaferMapScaleForm" ScaleX="{Binding Path=Value, ElementName=ZoomSlider}" ScaleY="{Binding Path=Value, ElementName=ZoomSlider}" />
</UniformGrid.LayoutTransform>
</UniformGrid>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="WaferMapScrollViewer" CanContentScroll="True" VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling" Loaded="WaferMapScrollViewer_Loaded" ScrollChanged="OnScrollViewerScrollChanged" PreviewMouseDown="OnMouseLeftButtonDown" PreviewMouseWheel="WaferMapScrollViewer_PreviewMouseWheel" PreviewMouseMove="OnMouseMove" PreviewMouseUp="OnMouseLeftButtonUp" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" Padding="0">
<ScrollViewer.Resources>
<Style TargetType="ScrollBar">
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="4"/>
<Setter Property="Margin" Value="0,0,0,0"/>
</Trigger>
</Style.Triggers>
</Style>
</ScrollViewer.Resources>
<ItemsPresenter></ItemsPresenter>
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<RadioButton x:Name="Die" MinHeight="{Binding ActualWidth,RelativeSource={RelativeSource Self}}" MinWidth="{Binding ActualHeight,RelativeSource={RelativeSource Self}}" Background="{Binding TestState,Converter={StaticResource TestStateConverter}}" BorderBrush="LightGray" BorderThickness="0.5" IsChecked="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" GroupName="DieGroup" Style="{StaticResource DieStyle}" Margin="0" Content="{Binding DisplayText}" >
<RadioButton.ToolTip>
<local:DieInfo></local:DieInfo>
</RadioButton.ToolTip>
</RadioButton>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
By the way, the Virtualization seems not working in uniformgird. Any one knows how to optimize my code to improve the proformance? Attach the screen shot of my application:

How can I transform a border but not the content inside?

Here is an image of my problem and my code below. I'd like to know how I can get the text to be flipped right side up. Below is also a link where I got the suggestions for setting scale transform Y to 1.
https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/how-to-flip-a-uielement-horizontally-or-vertically
<Viewbox>
<Grid>
<ItemsControl ItemsSource="{Binding FaceParts}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="SlateBlue" Height="140" Width="80" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="RenderTransform" Value="1 0 0 -1 0 0"/>
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Border Width="{Binding Width}" Height="{Binding Height}" Background="{Binding Fill}" BorderBrush="Black" BorderThickness=".20">
<Viewbox>
<TextBlock Text="{Binding TextOverlay}" RenderTransformOrigin=".5,.5">
<TextBlock.RenderTransform>
<ScaleTransform ScaleY="1"/>
</TextBlock.RenderTransform>
</TextBlock>
</Viewbox>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Viewbox VerticalAlignment="Bottom" Height="5" Margin="0,0,0,5">
<TextBlock Background="SlateBlue" TextAlignment="Center" Text="{Binding SelectedViewerProduct.Width, Converter={StaticResource FractionConverter}}"/>
</Viewbox>
</Grid>
</Viewbox>
As it turns out, setting ScaleY to a positive has no effect on flipping it right side up, in order to flip it right side up, I had to set the ScaleY to a -1. Essentially flipping it over again the opposite direction to make it right side up.

Relative Binding in RichTextBox to its Paragraph

I want to display a Line of Text via an ItemsControl beside a RichTextBox. Therefore I created this ControlTemplate:
<RichTextBox Margin="5,0,5,0">
<RichTextBox.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Margin" Value="5,0,5,0"/>
<Setter Property="LineHeight" Value="30"/>
<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
</Style>
</RichTextBox.Resources>
<RichTextBox.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Lines}" Margin="5,0,5,0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton Content="{Binding}" Height="{Binding BIND_ME_TO_LineHeigh_OF_PARAGRAPH" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Border Name="Border" CornerRadius="2" Padding="2" Background="White" BorderBrush="Black" BorderThickness="0" >
<ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
</Border>
</StackPanel>
</ControlTemplate>
</RichTextBox.Template>
To make the Items in the ItemsControl the same size as the paragraph's line I want to bind the ToggleButton's height to the LineHeight of the Paragraph which I defined in the Style for the Pararaph ( ). How can I do that?
Thanks

Canvas binding in silverlight

I'm trying to create a canvas, with items located at specefied locations on the canvast, as i can not bind an source and a template directly to a Canvas, have i used a ItemsControl.
But there are a problem all the items are located at 0,0. And i have tested the Bindings they do not return 0,0.
How can i make this work so the items are located at the right place?
Also is it poissible to create 2 layers on the canvas, where each layer is binded to a diffrent source, and uses a diffrent template?
This is in Silverlight
<ItemsControl Grid.Row="1" Grid.Column="1"
Width="650" Height="650"
ItemsSource="{Binding Skills}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Margin="0"
Width="650" Height="650" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Canvas.Top="{Binding Top}" Canvas.Left="{Binding Left}">
<TextBlock Text="{Binding Name}" />
<Image Source="{Binding Icon}" />
<StackPanel Orientation="Horizontal" >
<TextBlock FontWeight="Bold" TextAlignment="Center" Text="{Binding SkillPointsStatusText}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Test with ItemContainerStyle
<ItemsControl Grid.Row="1" Grid.Column="1"
Width="650" Height="650"
ItemsSource="{Binding Skills}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Margin="0"
Width="650" Height="650" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" />
<Image Source="{Binding Icon}" />
<TextBlock FontWeight="Bold" TextAlignment="Center" Text="{Binding SkillPointsStatusText}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Top" Value="{Binding Top}" />
<Setter Property="Canvas.Left" Value="{Binding Left}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
Well i have droped the project, but i will leave the question open should one have an anwser
All of the following does not work in SL4 since it depends on bindings in a Setter.Value.
Try setting the binding in the ItemContainerStyle since your StackPanel is not the root element; your template will be placed in a ContentPresenter, so your attached properties for canvas positioning in the StackPanel will be ignored.
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Top" Value="{Binding Top}" />
<Setter Property="Canvas.Left" Value="{Binding Left}" />
</Style>
</ItemsControl.ItemContainerStyle>
Edit: If Silverlight does not support ItemContainerStyle you can set the universal style for ContentPresenters which should work just as well:
<ItemsControl ItemsSource="{Binding Data}">
<ItemsControl.Resources>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding Left}"/>
<Setter Property="Canvas.Top" Value="{Binding Top}"/>
</Style>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Silverlight: Make the listbox background transparent?

I have a ListBox. It has a white background. How can I get rid of it?
Here is the XAML I'm trying. Whatever I do, I can't get rid of that background. (I'm not sure if it's on each item, which happen to take up all the space in the ListBox, or if it's on the background of the ListBox itself.)
<ListBox x:Name="topThreeHits" ItemsSource="{Binding TopThreeHits}" Margin="0,10,0,0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,0" Background="Transparent">
<Image Source="{Binding Image, FallbackValue=/PlumPudding;component/Images/file.png}" />
<TextBlock>
<Run Text="{Binding Name, FallbackValue='File Name'}" FontWeight="Bold" />
<Run Text="." Foreground="#787878" FontWeight="Light" />
<Run Text="{Binding TypeExtension, FallbackValue='type'}" Foreground="#787878" FontWeight="Light" />
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'm using Silverlight 4.
Your code is working fine, and properly setting the background style. I am assuming what you want to do is blow away the default item container completely so there is no background, including rollovers, etc.
The best way to do that is like this:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter Content="{TemplateBinding Content}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
I tried to add a Border around the ListBox with a Green Background and set the Background to Transparent for your ListBox and it seems to be working fine.
<Border Background="Green">
<ListBox x:Name="topThreeHits"
Background="Transparent"
ItemsSource="{Binding Customers}" Margin="0,10,0,0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,0" Background="Transparent">
<Image Source="{Binding Image, FallbackValue=/PlumPudding;component/Images/file.png}" />
<TextBlock>
<Run Text="{Binding Name, FallbackValue='File Name'}" FontWeight="Bold" />
<Run Text="." Foreground="#787878" FontWeight="Light" />
<Run Text="{Binding TypeExtension, FallbackValue='type'}" Foreground="#787878" FontWeight="Light" />
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>

Resources