I am having problem in stretching my image to fill the button,I am new in UWP this is my code:
<Grid Margin="0,0,0,54" VerticalAlignment="Bottom" Height="39" Style="{Binding HorizontalAlignment, ElementName=grid}" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Height="39" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Image Source="images/icon1.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="True" d:LayoutRounding="Auto" />
</Button>
<Button Grid.Column="1" Height="39" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Image Source="images/icon2.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="True" d:LayoutRounding="Auto" />
</Button>
</Grid>
You probably need to change the Padding and BorderThickness properties of the button. As code below :
<Button Grid.Column="0" Height="39" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="0" BorderThickness="0">
<Image Source="Assets/microsoft.png" Stretch="UniformToFill"/>
</Button>
Related
I'm attempting to make a "information" page, but when I get to a finished product this happens:
Video of application
So as you can see the poster of the movie and the description is fine to start with, but when the user attempts to use a different size than default it doesn't resize so the the user can see the same information.
Code:
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill" />
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<StackPanel Margin="80">
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick" Style="{StaticResource MaterialDesignRaisedLightButton}">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="{x:Bind Movie.Title}" />
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<StackPanel>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10" />
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100">
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
</StackPanel>
<StackPanel
MinWidth="300"
MaxWidth="600"
Padding="20">
<TextBlock Style="{StaticResource PageTitleStyle}" Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<TextBlock
Style="{StaticResource BodyTextStyle}"
Text="{x:Bind Movie.Overview}"
TextWrapping="WrapWholeWords" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
So in short, how do I keep the design, but make is so when the window changes size the image & text resizes to stay inside the window and stay visible.
Controls going outside of window
The problem is that when set root panel as StackPanel , the size of children element will be fixed. And it will not change as the window size changes. For solve the this, you could try to use Grid to replace. Please refer the following xaml layout.
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="Assets/hello.jpg"
Stretch="UniformToFill"
/>
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<Grid Margin="80" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="Grid Test Page"
/>
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<Grid
Grid.Row="1"
Margin="0,20,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10"
Source="Assets/hello.jpg"
/>
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100"
>
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
<StackPanel
Grid.Column="1"
MinWidth="300"
MaxWidth="600"
Padding="20"
>
<TextBlock Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<TextBlock Text="Defines a flexible grid area that consists of columns and rows. Child elements of the Grid are measured and arranged according to their row/column assignments (set by using Grid.Row and Grid.Column attached properties) and other logic." TextWrapping="WrapWholeWords" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</Grid>
I have a button with a flyout and for some reason I can't remove the border, white, around the black grid. Any suggestions?
Picture of output
Xaml Implementation
<Button Foreground="Transparent" HorizontalAlignment="Right" Width="30" Height="30" Margin="0,0,15,5">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/ButtonImage.png" />
</Button.Background>
<Button.Flyout>
<Flyout Placement="Top" >
<Grid Width="300" Height="auto" Margin="0,0,0,0" Background="Black" BorderThickness="3" BorderBrush="blue" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Height="50" Grid.Row="0" Background="Black" BorderBrush="Black">
<TextBlock x:Name="SSMenuAppVersionText" Text="123" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid x:Name="AppSuggestionGrid" Grid.Row="1" Background="Black" BorderBrush="Black">
<Button x:Name="AppSuggestionButton" Click="FeedBackButtonClicked" Background="Transparent" Height="50" HorizontalAlignment="Stretch">
<TextBlock x:Name="SSMenuAppSuggesstionText" Text="App Suggestions" Foreground="#007AFF" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
<Grid Grid.Row="2" BorderBrush="Black" Background="Black">
<Button x:Name="ReferButton" Click="ReferButtonClicked" Background="Black" Height="50" HorizontalAlignment="Stretch">
<TextBlock x:Name="SSMenuReferText" Text="Refer " Foreground="#007AFF" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
<Grid Grid.Row="3" BorderBrush="Black" Background="Black">
<Button x:Name="VisitButton" Click="VisitButtonClicked" Background="Black" Height="50" HorizontalAlignment="Stretch">
<TextBlock x:Name="SSMenuVisitText" Text="Visit " Foreground="#007AFF" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
You have options. If we go look at the guts of the Flyout Style Template we notice some set theme resources for Padding and Border which you can use to either override the properties, or just create your own Style template for Flyout and make them whatever you like.
So for example if you went and tossed something like this into your resource dictionary, you should override the ThemeResource for the app.
<Thickness x:Key="FlyoutContentThemePadding">0,0,0,0</Thickness>
<Thickness x:Key="FlyoutBorderThemeThickness">0</Thickness>
Hope this helps, cheers!
I have a TabItem which I want to display a DataGrid (MahApps.Metro) in the upper 90% of it and 2 buttons I want to display at the bottom 10% of it. This works when the window is fully enlarged, but when it is not, the scrollviewer is not visible and the controls and elements go off screen. Please help, I've been stuck for hours! Here is my code so far:
<TabItem Header="Queue" FontSize="15">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="77*"/>
<ColumnDefinition Width="24*"/>
</Grid.ColumnDefinitions>
<DataGrid x:Name="songdatagrid" VerticalAlignment="Stretch" ItemsSource="{Binding SongInfo}" VerticalScrollBarVisibility="Auto" AutoGenerateColumns="False" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
<DataGrid.Columns >
<DataGridTemplateColumn x:Name="songinfocolumn" Header="Song Info" Width=".6*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songInfo.Text}" Uid="{Binding SongInfo.Uid}" ToolTipService.ToolTip="Double click to open song in Youtube." MouseLeftButtonDown="tb_MouseLeftButtonDown5" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="requestercolumn" Header="Requester" Width=".18*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songReq.Text}" Uid="{Binding songReq.Uid}" ToolTipService.ToolTip="Double click to open requester's Twitch page." MouseLeftButtonDown="tb_MouseLeftButtonDown6" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="moveupcolumn" Header="Move Up" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding moveUp.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="moveup" ToolTipService.ToolTip="Click to move this song up in the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_arrow_up}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="deletecolumn" Header="Remove" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding delete.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="deleteSong" ToolTipService.ToolTip="Click to remove song from the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_delete}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="refresh" IsDefault="True" Background="White" Content="Refresh" Click="Button_Click" FontSize="16" Grid.Column="0" Grid.Row="1"/>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="clear" IsDefault="True" Background="White" Content="Clear List" Click="clearlist" FontSize="16" Grid.Column="1" Grid.Row="1"/>
</Grid>
</TabItem>
I had to add this to the top to get the Metro horizontal scrollbar working on the tabholder. Other than this, there are just more tabitems.
<TabControl x:Name="tabholder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightBlue"
SelectionChanged="TabControl_SelectionChanged" >
<TabControl.Template>
<ControlTemplate TargetType="TabControl">
<StackPanel>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<TabPanel x:Name="HeaderPanel"
Panel.ZIndex ="1"
KeyboardNavigation.TabIndex="1"
Grid.Column="0"
Grid.Row="0"
IsItemsHost="true"/>
</ScrollViewer>
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"/>
</StackPanel>
</ControlTemplate>
</TabControl.Template>
The StackPanel and the other Grid panels you have in there are redundant and causing your issues. Also your fixed Width & Height in templates that have their own set size attributes for things like Height are going to give unwanted results. You should only need something like this to accomplish your goal.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<DataGrid Grid.ColumnSpan="2">...</DataGrid>
<Button Grid.Row="1" Content="Button 1"/>
<Button Grid.Row="1" Grid.Column="1" Content="Button 2"/>
</Grid>
Cheers!
The StackPanel was causing the issues, everything works now! :D
I am Having an issue with my items in this Grid not spanning the width of the screen. Sorry if my code is sloppy. A bit new at this.
Thanks in advance!
Not the full code - wasn't sure if you would need it.
<Grid x:Name="grid" Margin="0,0,0,54" VerticalAlignment="Bottom" Height="39" Style="{Binding HorizontalAlignment, ElementName=grid}" ScrollViewer.HorizontalScrollBarVisibility="Auto" >
<StackPanel Orientation="Horizontal" >
<Button Margin="0,12,0,-2" Height="32" Width="Auto" HorizontalContentAlignment="Stretch">
<Button.Content>
<Image Source="images/icon1.png" Margin="-9.667,-3,-9.667,-1"/>
</Button.Content>
</Button>
<Button Margin="0,12,0,-2" Height="32" Width="Auto" HorizontalContentAlignment="Stretch" >
<Button.Content>
<Image Source="images/icon2.png" Margin="-10,-3,-10,-1"/>
</Button.Content>
</Button>
<Border Background="#d1d3d4" x:Name="typeHeader11" Grid.Column="1" Margin="0,24,0,9" RenderTransformOrigin="0.5,0.5" Width="17" HorizontalAlignment="Stretch">
<Border.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</Border.RenderTransform>
<Image Source="images/like.png"></Image>
</Border>
<Border Background="#d1d3d4" x:Name="typeHeader" Grid.Column="2" Margin="0,24,0,9" Width="67" HorizontalAlignment="Stretch">
<TextBlock Text="221" Width="20" Margin="0,7,0,10" FontSize="10.667" />
</Border>
<Border x:Name="typeHeader12" Grid.Column="1" Margin="0,24,0,9" RenderTransformOrigin="0.5,0.5" Width="17" HorizontalAlignment="Stretch">
<Border.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</Border.RenderTransform>
<Image Source="images/dislike.png"></Image>
</Border>
<Border x:Name="typeHeader2" Grid.Column="2" Margin="0,24,0,9" Width="56" HorizontalAlignment="Stretch">
<TextBlock Text="221" Width="20" Margin="0,7,0,10" Foreground="#FFFDF3F3" FontSize="10.667" />
</Border>
<Border x:Name="typeHeader13" Grid.Column="1" Margin="0,24,0,9" RenderTransformOrigin="0.5,0.5" Width="17" HorizontalAlignment="Stretch">
<Border.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</Border.RenderTransform>
<Image Source="images/comment.png"></Image>
</Border>
<Border Background="#d1d3d4" x:Name="typeHeader3" Grid.Column="2" Margin="0,24,0,9" Width="57" HorizontalAlignment="Stretch">
<TextBlock Text="221" Width="20" Margin="0,7,0,10" FontSize="10.667" />
</Border>
</StackPanel>
</Grid>
StackPanel does not stretch, use Grid and columns if you want to span items to the width of screen
<Grid x:Name="grid" ...>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/> // Auto adjust space
<ColumnDefinition Width="Auto"/> // Auto adjust space
<ColumnDefinition Width="*"/> // * = Stretch to fill
<ColumnDefinition Width="Auto"/> // Auto adjust space
</Grid.ColumnDefinitions>
<Button Grid.Column="0" ... />
<Button Grid.Column="1" ... />
<Button Grid.Column="2" ... /> // This will now expand as you resize window
<Button Grid.Column="3" ... />
</Grid>
I have a problem with positioning the TextBlock element on the bottom of the newsfeed rectangle.
I attached the image of the problem (red arrow is pointing at it). There is too much extra space at the bottom of the "timeago" TextBlock.
You can see that the problem only occurs when the movie title is short enough to fit into first line.
I would guess that this makes the StackPanel to shrink and therefore move the TextBlock with time elapsed a bit higher.
I tried changing the MinHeight of parent StackPanel to lower values or even removing the property, but it doesn't seem to work.
I am guessing that the problem is with the "inner" StackPanel containing the content, stars (not visible) and "timeago"
This is the DataTemplate of my LongListSelector
<DataTemplate>
<Grid Margin="12,2,5,4" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Fill="{StaticResource PhoneAccentBrush}"
Opacity="0.75"
Margin="0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
<StackPanel Grid.Row="0" Orientation="Horizontal"
Background="Transparent"
Height="auto"
MinHeight="99"
Width="auto">
<Grid HorizontalAlignment="Center"
Background="#FFFFC700"
Height="auto"
Width="99">
<Image Source="{Binding ImageUrl}"
Height="auto"
Width="auto"
Stretch="UniformToFill"
Margin="0"
HorizontalAlignment="Center"
VerticalAlignment="Stretch">
</Image>
</Grid>
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Margin="10,15,15,0" Text="{Binding Content}" Style="{StaticResource NewsFeedHighlitedContent}" FontSize="24" />
<Grid Margin="10,5,0,15" Visibility="{Binding StarsVisibility}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Image Source="{Binding StarOne}" Height="30" Margin="0,0" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="0" />
<Image Source="{Binding StarTwo}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="1" />
<Image Source="{Binding StarThree}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="2" />
<Image Source="{Binding StarFour}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="3" />
<Image Source="{Binding StarFive}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="4" />
</Grid>
<TextBlock Text="{Binding Time}" Margin="8,14,25,7" VerticalAlignment="Bottom" Style="{StaticResource NewsTimeAgoStyle}" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
And the style for "NewsTimeAgoStyle"
<Style x:Key="NewsTimeAgoStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontFamily" Value="Segoe WP Light" />
<Setter Property="Margin" Value="0,14,20,0" />
<Setter Property="Opacity" Value="0.8" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
Does anybody have any clue on how to solve this problem?
I am not sure but the problem might be because you are using StackPanel to display title and time ago text. I have changed your DataTemplate little bit to use Grid Panel. Try this and see this make any difference
<DataTemplate>
<Grid Margin="12,2,5,4" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Fill="{StaticResource PhoneAccentBrush}"
Opacity="0.75"
Margin="0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
<Grid Grid.Row="0"
Background="Transparent"
Height="auto"
MinHeight="99">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="99"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Center"
Background="#FFFFC700">
<Image Source="{Binding ImageUrl}"
Height="auto"
Width="auto"
Stretch="UniformToFill"
Margin="0"
HorizontalAlignment="Center"
VerticalAlignment="Stretch">
</Image>
</Grid>
<Grid Width="311" Margin="8,-7,0,0" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Margin="10,15,15,0" Text="{Binding Content}" Style="{StaticResource NewsFeedHighlitedContent}" FontSize="24" />
<Grid Margin="10,5,0,15" Visibility="{Binding StarsVisibility}" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Image Source="{Binding StarOne}" Height="30" Margin="0,0" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="0" />
<Image Source="{Binding StarTwo}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="1" />
<Image Source="{Binding StarThree}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="2" />
<Image Source="{Binding StarFour}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="3" />
<Image Source="{Binding StarFive}" Height="30" Width="30" Stretch="UniformToFill" Grid.Row="0" Grid.Column="4" />
</Grid>
<TextBlock Text="{Binding Time}" Margin="8,14,25,7" Grid.Row="2" VerticalAlignment="Bottom" Style="{StaticResource NewsTimeAgoStyle}" />
</Grid>
</Grid>
</Grid>
</DataTemplate>