locked
Grid.HorizontalAlignment refuses to stretch in ControlTemplate

    Question

  • I have the following ItemsControl and Style (note that the VisualStateManager.VisualStateGroups section is removed from this post to keep it as short as possible):
    <ItemsControl ItemsSource="{Binding Gifts,Converter={StaticResource GiftsWithIndex}}" FontFamily="Global User Interface">
    	<ItemsControl.ItemsPanel><ItemsPanelTemplate><StackPanel/></ItemsPanelTemplate></ItemsControl.ItemsPanel>
    	<ItemsControl.ItemTemplate><DataTemplate><RadioButton Style="{StaticResource GiftRadioButtonStyle}" Content="{Binding}"/></DataTemplate></ItemsControl.ItemTemplate>
    </ItemsControl>
    <Style x:Key="GiftRadioButtonStyle" TargetType="RadioButton">
    	<Setter Property="GroupName" Value="Gifts"/>
    	<Setter Property="MinWidth" Value="0"/>
    	<Setter Property="MinHeight" Value="0"/>
    	<Setter Property="BorderThickness" Value="2"/>
    	<Setter Property="Margin" Value="0,0,0,1"/>
    	<Setter Property="HorizontalAlignment" Value="Stretch"/>
    	<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="RadioButton">
    				<Grid Height="Auto" VerticalAlignment="Top" Background="{TemplateBinding Background}">
    					<StackPanel Margin="{TemplateBinding Margin}">
    						<Button x:Name="btnExpandable" Style="{StaticResource BasicButtonRectangle}" DataContext="{TemplateBinding Content}" BorderThickness="{TemplateBinding BorderThickness}" Content="{Binding Description}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="0"/>
    						<ContentControl x:Name="cntDetails" Content="{TemplateBinding Content}" ContentTemplate="{StaticResource DetailsTemplate}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Visibility="Collapsed"/>
    					</StackPanel>
    				</Grid>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>
    I want the template to stretch to the full width, but it is not. I have tried setting (both explicitly and through Styles) the HorizontalAlignment="Stretch" for the Grid in the ControlTemplate, but it still does not stretch the full width. Why is the Grid not stretching? I have seen sites that tell you to set the ItemContainerStyle (although all of these examples were for ListBox, none for ItemsControl), but I could not seem to get that to work either. Can anybody tell me why my Grid is not stretching the full width? Thanks.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Saturday, January 10, 2015 11:20 PM

Answers

  • OK, I think I know what was happening. I was using test data (with the d:DesignData stuff), and Visual Studio was displaying it differently than the emulator, but the emulator is displaying it the way I want. I guess I should have tried that first.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Monday, January 12, 2015 5:34 PM

All replies

  • Hi Nathan,

    HorizontalAlignment="Stretch" depends on your container, I did not see any code for your Container, is it a ListView or GridView?

    Simply test the RadioButton in a Grid has 600 witdh, works fine.

    --James


    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.

    Monday, January 12, 2015 7:18 AM
    Moderator
  • Neither, I am just using the ItemsControl. Here is the code:
    <Pivot x:Name="pivRecipients" Grid.Row="1" Background="Transparent">
    	<Pivot.ItemContainerStyle><Style TargetType="PivotItem"><Setter Property="Margin" Value="0"/></Style></Pivot.ItemContainerStyle>
    	<Pivot.HeaderTemplate><DataTemplate><TextBlock Text="{Binding Name}" FontSize="60" FontFamily="Arial"/></DataTemplate></Pivot.HeaderTemplate>
    	<Pivot.ItemTemplate>
    		<DataTemplate>
    			<ScrollViewer>
    				<ItemsControl ItemsSource="{Binding Gifts,Converter={StaticResource GiftsWithIndex}}" FontFamily="Global User Interface">
    					<ItemsControl.ItemsPanel><ItemsPanelTemplate><StackPanel/></ItemsPanelTemplate></ItemsControl.ItemsPanel>
    					<ItemsControl.ItemTemplate><DataTemplate><RadioButton Style="{StaticResource GiftRadioButtonStyle}" Content="{Binding}" IsChecked="False" Checked="Gift_Checked" Tag="{Binding Index}"/></DataTemplate></ItemsControl.ItemTemplate>
    				</ItemsControl>
    			</ScrollViewer>
    		</DataTemplate>
    	</Pivot.ItemTemplate>
    </Pivot>
    As you can see, this is a ScrollViewer with an ItemsControl as the ItemTemplate of a Pivot. Any ideas? Thanks.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Monday, January 12, 2015 5:13 PM
  • OK, I think I know what was happening. I was using test data (with the d:DesignData stuff), and Visual Studio was displaying it differently than the emulator, but the emulator is displaying it the way I want. I guess I should have tried that first.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Monday, January 12, 2015 5:34 PM