Binding Targets not updated

Question

I have an ItemsControl whose ItemTemplate includes a very basic UserControl of mine. The UserControl XAML is mostly the following:

<TextBlock x:Name="txtCardValue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" FontSize="56" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Text="0" FontFamily="Jing Jing" Margin="0,15,0,0"/>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource CornerValueTextBlockStyle}" Text="{Binding Text,ElementName=txtCardValue}"/>
<TextBlock Grid.Column="2" Grid.Row="0" Style="{StaticResource CornerValueTextBlockStyle}" Text="{Binding Text,ElementName=txtCardValue}"/>

As you can see, the second & third TextBlocks' Text properties are databound to the Text property of the first TextBlock. However, the last item in my ItemsControl displays the first TextBlock (txtCardValue), but not the second & third TextBlocks, which I am assuming means the databinding is not happening for the last item. Is this what is happening? The ItemsControl is definitely receiving the data, since it is displaying the appropriate value for the first TextBlock, so why is this happening only for the last item? Any help would be appreciated. Thanks.

---

Nathan Sokalski [e-mail] http://www.nathansokalski.com/

Answer 1

Hi Nathan,

>>which I am assuming means the databinding is not happening for the last item. Is this what is happening?
>>so why is this happening only for the last item?

It's impossible, you have mentioned that this issue only occur for the last item, so the databinding should work well for the second and third TextBlock.

I can't reproduce this issue in my demo, I will ask some detailed questions: What's the container of these three TextBlock? How many items do you have? Could you please share some code snippets for troubleshooting? A screenshot will also be helpful to understand your question.

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

Here is the code for the UserControl (Card.xaml & Card.xaml.vb):

<UserControl
	x:Class="Take6UnivAppTest_OneDevice_Windows.Card"
	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:ctrl="using:Take6UnivAppTest_OneDevice_Windows"
	mc:Ignorable="d" Margin="5" d:DesignWidth="114" d:DesignHeight="172">
	<UserControl.Resources>
		<ctrl:PointVisibilityConverter x:Key="PointVisibility"/>
		<Style x:Key="CornerValueTextBlockStyle" TargetType="TextBlock">
			<Setter Property="FontFamily" Value="Impact"/>
			<Setter Property="FontSize" Value="18"/>
			<Setter Property="FontWeight" Value="Normal"/>
			<Setter Property="Foreground" Value="Black"/>
			<Setter Property="HorizontalAlignment" Value="Center"/>
		</Style>
		<Style TargetType="Image">
			<Setter Property="Stretch" Value="None"/>
			<Setter Property="Source" Value="cattlehead.png"/>
		</Style>
	</UserControl.Resources>
	<Border Background="White" BorderBrush="Black" BorderThickness="1" CornerRadius="15" Width="114" Height="172" Padding="5,3" VerticalAlignment="Center" HorizontalAlignment="Center" Opacity="0.5">
		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"/>
				<RowDefinition Height="*"/>
				<RowDefinition Height="Auto"/>
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto"/>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="Auto"/>
			</Grid.ColumnDefinitions>
			<TextBlock x:Name="txtCardValue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" FontSize="56" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Text="0" FontFamily="Jing Jing" Margin="0,15,0,0"/>
			<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource CornerValueTextBlockStyle}" Text="{Binding Text,ElementName=txtCardValue}"/>
			<TextBlock Grid.Column="2" Grid.Row="0" Style="{StaticResource CornerValueTextBlockStyle}" Text="{Binding Text,ElementName=txtCardValue}"/>
			<TextBlock Grid.Column="0" Grid.Row="2" Style="{StaticResource CornerValueTextBlockStyle}" Text="{Binding Text,ElementName=txtCardValue}" RenderTransformOrigin="0.5,0.5"><TextBlock.RenderTransform><CompositeTransform Rotation="180"/></TextBlock.RenderTransform></TextBlock>
			<TextBlock Grid.Column="2" Grid.Row="2" Style="{StaticResource CornerValueTextBlockStyle}" Text="{Binding Text,ElementName=txtCardValue}" RenderTransformOrigin="0.5,0.5"><TextBlock.RenderTransform><CompositeTransform Rotation="180"/></TextBlock.RenderTransform></TextBlock>
			<Grid Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" HorizontalAlignment="Center">
				<Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions>
				<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=0}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=1}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=2}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=3}"/>
				</StackPanel>
				<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=4}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=5}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=6}"/>
				</StackPanel>
			</Grid>
			<Grid Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
				<Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions>
				<Grid.RenderTransform><CompositeTransform Rotation="180"/></Grid.RenderTransform>
				<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=0}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=1}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=2}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=3}"/>
				</StackPanel>
				<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=4}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=5}"/>
					<Image Visibility="{Binding Text,ElementName=txtCardValue,Converter={StaticResource PointVisibility},ConverterParameter=6}"/>
				</StackPanel>
			</Grid>
		</Grid>
	</Border>
</UserControl>

Public NotInheritable Class Card : Inherits UserControl
	Public Shared ReadOnly ValueProperty As DependencyProperty = DependencyProperty.Register("Value", GetType(Integer), GetType(Card), New PropertyMetadata(Nothing, AddressOf ValueChanged))
	Public Property Value() As Integer
		Get
			Return If(GetValue(ValueProperty) Is Nothing, Nothing, CInt(GetValue(ValueProperty)))
		End Get
		Set(value As Integer)
			SetValue(ValueProperty, value)
		End Set
	End Property
	Public ReadOnly Property Points() As Integer
		Get
			Return If(Me.Value = 0, 0, App.CardPoints(Me.Value - 1))
		End Get
	End Property
	Public Property IsSelected() As Boolean = False

	Public Sub New()
		InitializeComponent()
	End Sub

	Private Shared Sub ValueChanged(sender As DependencyObject, e As DependencyPropertyChangedEventArgs)
		CType(sender, Card).txtCardValue.Text = e.NewValue.ToString()
	End Sub
End Class

And the XAML for the ItemsControl that is used is as follows:

<ItemsControl Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" ItemsSource="{Binding Cards}">
	<ItemsControl.ItemsPanel><ItemsPanelTemplate><Grid/></ItemsPanelTemplate></ItemsControl.ItemsPanel>
	<ItemsControl.ItemTemplate><DataTemplate><ctrl:Card Value="{Binding Value}" Margin="{Binding Index,Converter={StaticResource CardMargin}}" Tag="{Binding PlayerCardIndex}" Visibility="{Binding Visibility}" Tapped="Card_Tapped"/></DataTemplate></ItemsControl.ItemTemplate>
</ItemsControl>

And here is a screenshot of what is created by the ItemsControl:

As you can see by looking at the bottom of the screenshot, card 92 (the second last item) has the databound TextBlocks (the ones in the corners), but card 103 (the last item) does not, but it does still have the one in the middle. I am, however, also noticing that the Border (the black line around the edge of each card) is not displayed, and the Border is not even databound. Is this related in any way? Thanks.

---

Nathan Sokalski [e-mail] http://www.nathansokalski.com/

Answer 3

Hi Nathan,

It's strange, to reproduce your issue, I recreated a demo, but it worked well:

Let's make a simple test:

Hard code the Text property of the following four TextBlock controls:

<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource CornerValueTextBlockStyle}" Text="999"/>
<TextBlock Grid.Column="2" Grid.Row="0" Style="{StaticResource CornerValueTextBlockStyle}" Text="999"/>
<TextBlock Grid.Column="0" Grid.Row="2" Style="{StaticResource CornerValueTextBlockStyle}" Text="999" RenderTransformOrigin="0.5,0.5">
                <TextBlock.RenderTransform>
                    <CompositeTransform Rotation="180"/>
                </TextBlock.RenderTransform>
</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="2" Style="{StaticResource CornerValueTextBlockStyle}" Text="999" RenderTransformOrigin="0.5,0.5">
                <TextBlock.RenderTransform>
                    <CompositeTransform Rotation="180"/>
                </TextBlock.RenderTransform>
</TextBlock>

Please show us the result with screenshot, if the above change is effective, we will continue to check the data binding and other part of your code.

Looking forward to your feedback.

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 4

I'm not sure why my code wasn't working before, and the problem still happens with my previous code, but when I added a negative margin to shift the entire thing upward (so that the bottom isn't chopped off the screen) it worked. Why it doesn't still show the top when the bottom is chopped off, I don't know, but since I was planning on shifting it up to avoid chopping off anyway, I guess it's good enough for now.

---

Nathan Sokalski [e-mail] http://www.nathansokalski.com/