I am building a UWP app utilizing an image and a textblock. I want to follow the design guidelines and have two columns for larger devices and one column for phones. I am not using either Grid now GridView because those two layouts did not work particularly well with my VisualStates (either the textblock did not show, or it was limited in height to the same height as the image, and so on).
Here is what my XAML looks like:
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal" Background="Black" Margin="24" Name="IssuePanel">
<Image Name="CoverImage" Width="300" VerticalAlignment="Top" />
<TextBlock Name="Description" HorizontalAlignment="Left" Foreground="White" TextWrapping="WrapWholeWords" Text="{Binding Description}" />
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="320"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="IssuePanel.Margin" Value="12"/>
<Setter Target="IssuePanel.Orientation" Value="Vertical"/>
<Setter Target="CoverImage.Width" Value="200"/>
<Setter Target="Description.Width" Value="320"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Description.Width" Value="320"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1024"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Description.Width" Value="720"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ScrollViewer>
As you can see, I am setting the Description textblock's width in all the Visual states. While it breaks correctly, it looks like shit. I want the text to always go to the end of the window/page. What is the better way to do this sort of scenario?
