We Keep Coding

In UWP, how to have action button inside ItemRepeater?

I have an issue putting an action button in my ItemRepeater. I proceeded the same way as I do in ListView :
<muxc:ItemsRepeater Margin="0,24,0,0" ItemsSource="{x:Bind ViewModel.Team.Events, Mode=OneWay}">
<muxc:ItemsRepeater.ItemTemplate>
<DataTemplate x:DataType="models:Event">
<controls:Expander
HorizontalContentAlignment="Left"
Header="{x:Bind Name, Mode=OneWay}"
ExpandDirection="Down"
>
<StackPanel HorizontalAlignment="Left" Padding="24">
<TextBlock Text="{x:Bind Name}" FontSize="36" />
<TextBlock Text="{x:Bind Description}" />
<StackPanel Spacing="4" Orientation="Horizontal">
<TextBlock Text="{x:Bind Start}" />
<TextBlock Text="-" />
<TextBlock Text="{x:Bind End}" />
</StackPanel>
<TextBlock Text="{x:Bind Type}" />
<Grid Width="1000" Margin="0,24,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="13*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock FontSize="24" Text="Participations" />
<ListView ItemsSource="{x:Bind Participations}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Participation">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Username}" />
<FontIcon Grid.Column="1" Glyph="{x:Bind Confirmed, Converter={StaticResource BooleanIconConverter}}"></FontIcon>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
<StackPanel Grid.Column="2">
<TextBlock FontSize="24" Text="Discrepancies" />
<Grid Margin="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Player" />
<TextBlock Text="Type" Grid.Column="1"/>
<TextBlock Text="Reason" Grid.Column="2"/>
<TextBlock Text="Delay" Grid.Column="3"/>
</Grid>
<ListView ItemsSource="{x:Bind Discrepancies}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Discrepancy">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Username}" />
<TextBlock Text="{x:Bind Type}" Grid.Column="1"/>
<TextBlock Text="{x:Bind Reason}" Grid.Column="2"/>
<TextBlock Text="{x:Bind DelayLength}" Grid.Column="3"/>
<Button Grid.Column="4" HorizontalAlignment="Right">
<Button.Flyout>
<Flyout>
<StackPanel>
<TextBlock Style="{ThemeResource BaseTextBlockStyle}" Text="Are you sure ?" Margin="0,0,0,12" />
<Button Click="DeleteDiscrepancy" Content="Yes" />
</StackPanel>
</Flyout>
</Button.Flyout>
<StackPanel Spacing="8" Orientation="Horizontal">
<FontIcon Glyph="" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>
<StackPanel Spacing="16" Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Click="HandleClickAddDiscrepancy">
<StackPanel Spacing="8" Orientation="Horizontal">
<TextBlock Text="Add Discrepancy"></TextBlock>
<FontIcon Glyph=""/>
</StackPanel>
</Button>
<Button>
<StackPanel Spacing="8" Orientation="Horizontal">
<TextBlock Text="Edit Event"></TextBlock>
<FontIcon Glyph=""/>
</StackPanel>
</Button>
<Button>
<StackPanel Spacing="8" Orientation="Horizontal">
<TextBlock Text="Delete Event"></TextBlock>
<FontIcon Glyph=""/>
</StackPanel>
</Button>
</StackPanel>
</StackPanel>
</controls:Expander>
</DataTemplate>
</muxc:ItemsRepeater.ItemTemplate>
</muxc:ItemsRepeater>
And in my code-behind :
private void HandleClickAddDiscrepancy(object sender, RoutedEventArgs e) {
var evt = (sender as Button)?.DataContext as Event;
if(ViewModel.AddDiscrepancyCommand.CanExecute(evt)) {
ViewModel.AddDiscrepancyCommand.Execute(evt);
}
}
But in this code-behind method, the DataContext of my button is null. Shouldn't it be the currend element of the list, in which section the button I clicked is ?
How should I proceed to implement such feature ?
Thanks in advance !

Stretch TextBlock to all available width

I'm creating UWP application where one of the screens have layout like this:
<ListView>
<ListViewItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Ellipse
Width="32"
Height="32"
Margin="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="LightGray" />
<TextBlock
Grid.Column="1"
Margin="12,6,0,0"
FontSize="20"
Text="Here is Long Name" />
<StackPanel
Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Width="25" Height="45" BorderThickness="0">-</Button>
<TextBlock
Width="25"
Height="45"
Padding="0,5,0,0"
FontSize="24"
Text="0"
TextAlignment="Center" />
<Button Width="30" Height="45" BorderThickness="0">+</Button>
</StackPanel>
</Grid>
</ListViewItem>
<ListViewItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Ellipse
Width="32"
Height="32"
Margin="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="LightGray" />
<TextBlock
Grid.Column="1"
Margin="12,6,0,0"
FontSize="20"
Text="Short name" />
<StackPanel
Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Width="25" Height="45" BorderThickness="0">-</Button>
<TextBlock
Width="25"
Height="45"
Padding="0,5,0,0"
FontSize="24"
Text="0"
TextAlignment="Center" />
<Button Width="30" Height="45" BorderThickness="0">+</Button>
</StackPanel>
</Grid>
</ListViewItem>
</ListView>
It looks like this (I'm not allowed to insert image): https://i.stack.imgur.com/Afvn6.png
I want that StackPanel in last column to be on the right side, no matter how long is name. I assume this will be the case if TextBlock stretches to all available width, but it doesn't. How do I fix this?

Add this to you ListView
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>

Complete DataTemplate clickable?

I have following DataTemplate for usage within my phone.LongListSelector in my XAML view:
<DataTemplate x:Name="myLocationsListTemplate">
<StackPanel Margin="0,0,0,15">
<Grid VerticalAlignment="Top" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="{Binding DistanceInMeterFormatted, FallbackValue=fallback, TargetNullValue=nullvalue, Mode=OneWay}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
<TextBlock Grid.Column="1" Text="vor 10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="{Binding PreviewImg1}"/>
<Image Grid.Column="1" Width="100" Height="100" Source="{Binding PreviewImg2}"/>
<Image Grid.Column="2" Width="100" Height="100" Source="{Binding PreviewImg3}"/>
<Image Grid.Column="3" Width="100" Height="100" Source="{Binding PreviewImg4}"/>
</Grid>
</StackPanel>
</DataTemplate>
Now I want the complete DataTemplate Content made "clickable". Means: If user clicks on a TextBlock or one of the four Images or on whatever displayed in die List, an action should be performed with a databound property (saying the Name from the bound data should be given).
Any ideas how to get this working?

Why don't you just stick your entire template into a button? You can style the button if needs be to remove any default appearance you don't like. eg.
<Style x:Key="BlankButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
</Style>

how to place a horizontal line after each item in listbox

I am building an application for Windows Phone 7 where i am displaying a few data in listbox. I want to add an image after each item to distinguish it from another. My xaml code is:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The index.jpg image is the horizontal line i wanted to add. Please help where to add that image so that i get that image as a separator for each data

Check this:
http://social.msdn.microsoft.com/Forums/vstudio/en-US/e09926c2-5d53-4337-ba76-d1c786ec9ced/listbox-with-horizontal-lineseparator?forum=wpf
1st answer
Try something like this:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This will help you ;)

Silverlight TabItem content not scrolling

I have this XAML where I have tried to get TabItem content to scroll (without success).
<ex:TabControl>
<ex:TabItem Header="General">
<ContentPresenter Content="{Binding }" ContentTemplate="{StaticResource tabMenuItem}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ex:TabItem>
<ex:TabItem Header="Prices (Item)">
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto">
<ContentPresenter Content="{Binding NonModifierPricesView}" ContentTemplate="{StaticResource tabMenuItemPrices}" />
</ScrollViewer>
</ex:TabItem>
</ex:TabControl>
When my TabControl gets resized so that the TabItem is too small to display all the content, no scrollbars are displayed. Have I done something wrong somewhere?
Edit : Requested XAML for tabMenuItemPrices
<DataTemplate x:Key="tabMenuItemPrices">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="1*" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Prices (in order of priority)" />
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ListBox HorizontalAlignment="Stretch" Margin="{StaticResource DefaultMargin}" x:Name="lstMenuItemPrices" SelectionMode="Single"
ItemsSource="{Binding }" ItemTemplate="{StaticResource MenuItemPriceDataTemplate}" Height="140" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<cmd:EventToCommand Command="{Binding DataContext.UpdateSelectedTaxGroupsCommand, ElementName=Editor}" CommandParameter="{Binding SelectedItem, ElementName=lstMenuItemPrices}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
<StackPanel VerticalAlignment="Center" Grid.Column="1" >
<Button Content="Move Up" HorizontalAlignment="Center" Margin="2" IsEnabled="{Binding SelectedIndex, Converter={StaticResource MinimumIntegerToBooleanConverter}, ConverterParameter=0, ElementName=lstMenuItemPrices, Mode=OneWay}" />
<Button Content="Move Down" HorizontalAlignment="Center" Margin="2" IsEnabled="{Binding SelectedIndex, Converter={StaticResource MinimumIntegerToBooleanConverter}, ConverterParameter=0, ElementName=lstMenuItemPrices, Mode=OneWay}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.ColumnSpan="2">
<Button HorizontalAlignment="Left" Margin="2" Content="New Price" Command="{Binding DataContext.AddPriceCommand, ElementName=Editor}" />
<Button Content="Remove Price" HorizontalAlignment="Left" Margin="2" Command="{Binding DataContext.RemovePriceCommand, ElementName=Editor}" CommandParameter="{Binding SelectedItem, ElementName=lstMenuItemPrices}"
IsEnabled="{Binding SelectedIndex, Converter={StaticResource MinimumIntegerToBooleanConverter}, ConverterParameter=0, ElementName=lstMenuItemPrices, Mode=OneWay}"/>
</StackPanel>
</Grid>
<TextBlock Text="Selected Price" Grid.Row="2" />
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<CheckBox Content="Amount Includes Tax" d:LayoutOverrides="Width, Height" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center"
IsChecked="{Binding SelectedItem.DTO.AmountIncludesTax, Mode=TwoWay, ElementName=lstMenuItemPrices}" Grid.ColumnSpan="3"/>
<TextBlock HorizontalAlignment="Right" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Text="Amount" Grid.Row="1"/>
<TextBlock Text="Cost" d:LayoutOverrides="Width, Height, GridBox" HorizontalAlignment="Right" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Row="2"/>
<TextBlock HorizontalAlignment="Right" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Text="Points" Grid.Row="3"/>
<TextBlock HorizontalAlignment="Right" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Text="Interface ID" Grid.Row="4"/>
<TextBox VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" Margin="{StaticResource DefaultMargin}"
Text="{Binding SelectedItem.DTO.Amount, Mode=TwoWay, ElementName=lstMenuItemPrices, Converter={StaticResource DecimalToMoneyStringConverter}}" />
<CheckBox Content="Open" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2"
IsChecked="{Binding SelectedItem.DTO.IsOpenAmount, Mode=TwoWay, ElementName=lstMenuItemPrices}"/>
<TextBox Text="{Binding SelectedItem.DTO.Cost, Converter={StaticResource DecimalToMoneyStringConverter}, Mode=TwoWay, ElementName=lstMenuItemPrices}" TextWrapping="Wrap"
Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" d:LayoutOverrides="GridBox" Grid.Column="1" Grid.Row="2"/>
<CheckBox Content="Inherit" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Column="2" Grid.Row="2"
IsChecked="{Binding SelectedItem.DTO.CostOverride, Converter={StaticResource CostToBooleanConverter}, Mode=TwoWay, ElementName=lstMenuItemPrices}" />
<TextBox Text="{Binding SelectedItem.DTO.PointsEarned, Converter={StaticResource IntegerToStringConverter}, Mode=TwoWay, ElementName=lstMenuItemPrices}" TextWrapping="Wrap"
Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3"
IsEnabled="{Binding SelectedItem.DTO.PointsEarnedInherited, Converter={StaticResource ReverseBooleanConverter}, ElementName=lstMenuItemPrices}"/>
<CheckBox Content="Inherit" Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Grid.Column="2" Grid.Row="3"
IsChecked="{Binding SelectedItem.DTO.InheritPointsEarned, Mode=TwoWay, ElementName=lstMenuItemPrices}" />
<TextBox Margin="{StaticResource DefaultMargin}" Grid.Column="1" Grid.Row="4"
Text="{Binding SelectedItem.DTO.InterfaceID, Mode=TwoWay, ElementName=lstMenuItemPrices}" />
<CheckBox Margin="{StaticResource DefaultMargin}" VerticalAlignment="Center" Content="Inherit tax from class" HorizontalAlignment="Left"
IsChecked="{Binding SelectedItem.DTO.InheritTaxes, Mode=TwoWay, ElementName=lstMenuItemPrices}" Grid.Row="5" Grid.ColumnSpan="3" />
<ListBox Margin="{StaticResource DefaultMargin}" Grid.Row="6" Grid.ColumnSpan="3" SelectionMode="Multiple" ItemsSource="{Binding DataContext.Repository.TaxGroups, ElementName=Editor}"
IsEnabled="{Binding SelectedItem.DTO.InheritTaxes, Converter={StaticResource BooleanToEnabledConverter}, ElementName=lstMenuItemPrices, ConverterParameter=false}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" >
<Setter Property="Margin" Value="2, 2, 2, 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Background="Transparent">
<CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"
Content="{Binding DTO.Name}" Padding="5,0,10,0" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<cmd:EventToCommand Command="{Binding SelectedItem.AddTaxGroupCommand, ElementName=lstMenuItemPrices}" CommandParameter="{Binding DTO.ID}" />
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<cmd:EventToCommand Command="{Binding SelectedItem.RemoveTaxGroupCommand, ElementName=lstMenuItemPrices}" CommandParameter="{Binding DTO.ID}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Grid>
</DataTemplate>

The ScrollViewer's child needs to manage it's own height and width. Your outer most grid in your ContentTemplate does not specify a HorizontalAlignment or VerticalAlignment so it's defaulting to a value of stretch... you can try setting the alignments to left and top as follows:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
The bottom line is, the outer most container inside your control template must set it's height and width to it's contents, not the parent container.