Initial Rendering of ItemsControl is Incorrect

Question

I have an ItemsControl with the following ItemTemplate:

<DataTemplate>
	<Grid x:Name="grdPlayerTemplate" Loaded="grdPlayerTemplate_Loaded">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*"/>
			<ColumnDefinition Width="Auto"/>
			<ColumnDefinition Width="Auto"/>
		</Grid.ColumnDefinitions>
		<TextBox Grid.Column="0" Style="{StaticResource NoDeleteTextBox}" FontSize="32" Margin="0,3" Padding="3,-6" Text="{Binding PlayerName}" Tag="{Binding Index}" BorderThickness="1" BorderBrush="Black" VerticalAlignment="Stretch" IsTextPredictionEnabled="False" TextChanged="PlayerName_TextChanged" Loaded="PlayerName_Loaded"/>
		<Button Grid.Column="1" Style="{StaticResource BasicButton}" FontSize="32" Margin="0" Padding="0,-2,1,-1" Content="&#xE10A;" Tag="{Binding Index}" FontFamily="Segoe UI Symbol" IsEnabled="{Binding Children[0].Text,ElementName=grdPlayerTemplate,Converter={StaticResource IsNullOrWhiteSpace},ConverterParameter=NOT}" Click="DeletePlayer_Click"/>
		<Button Grid.Column="2" Style="{StaticResource BasicButton}" FontSize="32" Margin="0" Content="Move Up" Tag="{Binding Index}" IsEnabled="{Binding Children[0].Text,ElementName=grdPlayerTemplate,Converter={StaticResource IsNullOrWhiteSpace},ConverterParameter=NOT}" Opacity="{Binding Index,Converter={StaticResource HideValueOpacity}}" Click="MoveUp_Click"/>
	</Grid>
</DataTemplate>

As you can see, the template is simply a TextBox and a couple Button controls in a Grid. The initial rendering shows up as follows:
This shows the elements I expect, but the Button is on top of the TextBox. After I enter some text into the TextBox (which causes the ItemsControl to reassign a value to itself), it renders correctly, even if I delete that text afterwards. Here is the good rendering after text has been entered and deleted:

I am guessing that the ItemsControl is being rendered too early, causing it to appear incorrectly, and then it appears correctly after being re-rendered later when I enter the text. How (and in what event) can I make the initial rendering appear correctly? Thanks.

---

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

Answer 1

Hi Nathan,

It looks strange, but I don't quite understand what do you mean by "ItemsControl is being rendered too early, causing it to appear incorrectly", let's say if you consider it is a render problem, try to modify following code with a number to test if the correct place will be leaved.

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

What I meant is that it is trying to calculate the size of the ItemsControl before everything else is done rendering, therefore using incorrect values. I am not an expert on when and what order things are rendered, so I could very well be wrong about that. If there is an event in which I can rebind the ItemsControl that I know everything is done rendering in (although I tried the Loaded event), I could see if that helps, but I'm otherwise out of ideas.

---

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