I have the following DataTemplate for my GridView
<DataTemplate x:Key="GridViewItemTemplate">
<Grid Margin="5,10" MaxWidth="80">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Vendor image-->
<toolkitControls:RoundImageEx IsCacheEnabled="True" PlaceholderSource="/Assets/Samples/AnotherSampleImage.png" PlaceholderStretch="Uniform" Source="/Assets/Samples/SampleImage.png" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.Row="1" Padding="0,5,0,0" Text="{Binding NameEn}" HorizontalAlignment="Center" TextWrapping="Wrap" FontSize="{StaticResource SmallTextSize}"/>
</Grid>
</DataTemplate>
Here I'm using RoundImageEx control from UWP community toolkit. The problem is that neither Image not ImagePlaceholder is not showing.
I've tried using the ImageEx control from the toolkit and it works great.
GridView using ImageEx in the DataTemplate (it works just fine)
GridView using RoundImageEx in the DateTemplate (images not showing)
Is it some kind of a bug or I'm doing something wrong?
Method 1:
Set HorizontalAlignment and VerticalAlignment as Stretch for your RoundImageEx control
Code Sample
<toolkitControls:RoundImageEx IsCacheEnabled="True" PlaceholderSource="/Assets/Samples/AnotherSampleImage.png"
PlaceholderStretch="Uniform" Source="/Assets/Samples/SampleImage.png" Stretch="Uniform"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
Method 2:
Set Width and Height for your RoundImageEx control
Code Sample
<toolkitControls:RoundImageEx IsCacheEnabled="True" PlaceholderSource="/Assets/Samples/AnotherSampleImage.png"
PlaceholderStretch="Uniform" Source="/Assets/Samples/SampleImage.png" Stretch="Uniform"
Width="100" Height="100"/>
Related
ListView is placed inside UserControl which is set in parent XAML to asterix "*" height.
I want to use ListView with possibility to scroll items, when there are items that exceed ListView. It should work for different size of window.
It works fine when I set Grid's RowDefinitions with fixed integer, but when I try to use asterix "*" ScrollViewer disables.
I also tried to bind and update RowDefinition's height via some code behind in overriden MeasureOverride method, but it didn't work as expected.
Here is code inside my UserControl:
<Grid x:Name="ContentArea"
Background="{StaticResource MixerBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="{x:Bind ListViewHeight}" />
</Grid.RowDefinitions>
<ListView
ItemsSource="{x:Bind ViewModel.Source,Mode=TwoWay}"
CanDragItems="True"
CanReorderItems="True"
AllowDrop="True"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Track">
<Grid
Background="LightGray"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
BorderBrush="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBlock
Text="{x:Bind Id}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="24"
Margin="20,5,20,5"/>
<Grid
Background="Black"
Width="500"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1">
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I expect to get the ScrollViewer working correctly, but ListView stay at the old size or scroll bar is disabled - depending on Height value.
Is there any way to achieve dynamically resizing ListView with scroll?
Edit
Here is parent Page XAML code which is loaded into Frame via Light MVVM framework:
<Grid
x:Name="ContentArea">
<Grid
Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
<maineditor:MainEditorMenuControl x:Name="ProjectMenu" />
<maineditor:MainEditorWorkspaceControl x:Name="Workspace" Grid.Row="1"/>
<maineditor:MainEditorMixerControl x:Name="Mixer" Grid.Row="2" />
</Grid>
</Grid>
Edit 2
I think the problem may be connected with MVVM template I've created with Windows Template Studio plugin for Visual Studio. If I try to recreate minimal solution from scratch with all properties 1:1 as in my app it works in fresh project, but not in mine.
How to dynamically update ListView height while keeping the ScrollViewer enabled?
If you want make RowDefinition height same as the ListView, you could give the ListView a name and use {Binding ElementName=MyListView,Path=ActualHeight}syntax to bind both height property.
<Grid x:Name="ContentArea">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=MyListView,Path=ActualHeight}" />
</Grid.RowDefinitions>
<ListView
Name="MyListView"
CanDragItems="True"
CanReorderItems="True"
AllowDrop="True"
Loaded="MyListView_Loaded"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate >
<Grid
Background="LightGray"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
BorderBrush="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBlock
Text="{Binding}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="24"
Margin="20,5,20,5"/>
<Grid
Background="Black"
Width="500"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1">
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
I have some DataTemplate for Windows GridView in corresponding platform. In this template there should be picture with some text. This text should have background, but only for readibility purposes. I want to have this background to be transparent so image could be seen through it. However, when I set background in format #4C000000, nothing happens and it stays solid black.
<DataTemplate x:Key="GridViewPlayerDataTemplate">
<Grid Height="100" Width="100" >
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Image x:Name="ImageRoleImage" Stretch="UniformToFill" Source="{Binding Guess.PlayerRole.ImageSource , Mode=OneWay, Converter={StaticResource ImageConverterHou}}" />
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Opacity="0.1" Grid.RowSpan="1" Background="#4C000000">
<TextBlock x:Name="TextBlockPlayerName" Opacity="1" TextWrapping="Wrap" Text="{Binding Actor.Name}" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="1" Grid.RowSpan="1" Background="#4C000000">
<TextBlock x:Name="TextBlockPlayerGuessedRole" TextWrapping="Wrap" Text="{Binding Guess.PlayerRole.Name}" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
</DataTemplate>
I tried to create this pure Windows Store application and transparency works just fine.
Can anyone tell me something about this strange behaviour and/or how to fix it?
I have a TextBlock inside a ScrollViewer which resides inside a HubSection. "Summary" binding has a long text so I want it to wrap at the end of the line but it doesn't wrap and the HubSection stretches as wide as the text inside TextBlock. I have tried to set the HorizontalScrollMode to disabled without any success. I also tried putting the TextBlock inside the grid instead of outside it such that it wraps the summary TextBlock. Again this didn't solve my problem.
I can give a width to HubSection but I want my application to work in different resolutions without a problem so I don't want to do that.
I have been trying to find an answer to this problem without any success.
Thanks for your answers in advance.
<HubSection x:Uid="MyHubSection" Header="{Binding Path=DisplayName}" Width="Auto" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid x:Name="MyGrid" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="40" />
<RowDefinition Height="Auto" MinHeight="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text ="{Binding Path=Summary}" TextWrapping="Wrap" />
<TextBlock Grid.Row="1" TextWrapping="Wrap">
<Run Text="Last Edit Date " />
<Run Text="{Binding Path=LastEditDate}" />
</TextBlock>
</Grid>
</ScrollViewer>
</DataTemplate>
</HubSection>
I have created a Windows Store App with the default Hub Project, and on the first hubsection, I have an image as the background. I want to position some text at the bottom of the image to describe what the image is. However I am having trouble position the text inside the Hubsection.contenttemplate.
As you will be able to see from the code I have tried several things including trying to set the vertical alignment of both the grid and the individual text blocks, but neither seems to be working for me.
The code I currently have can be found below.
<HubSection Width="780">
<HubSection.Background>
<ImageBrush ImageSource="Assets/Images/example_meal.png" Stretch="UniformToFill" />
</HubSection.Background>
<HubSection.ContentTemplate>
<DataTemplate>
<Grid Margin="80,0,0,0" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Bottom" x:Name="pageTitle" Text="Primary Text" Style="{StaticResource TitleTextStyle}"
TextWrapping="NoWrap" FontSize="30" Margin="0,0,0,0" />
<TextBlock Grid.Row="1" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}" Text="Secondary Text" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</HubSection.ContentTemplate>
</HubSection>
I have the following XAML code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="#FFE8E8E8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,0" >
<TextBlock x:Name="AppName" Text="Agent" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0" Foreground="Black" />
<TextBlock x:Name="PageName" Text="agent audit" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="100" Foreground="Black"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Background="White"/>
<ScrollViewer HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" VerticalAlignment="Top">
<TextBlock x:Name="auditText" HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Foreground="Black" Padding="10"/>
</ScrollViewer>
</Grid>
When the page comes into view I assign the TextBlock with the contents of an API Call (audit log text), and this gets quite long.
However, currently it cuts off all text below the screen height. I have the TextBlock and ScrollView set to Auto layout height/width.
I can even see the top of the next line of text, when I scroll the rest doesn't appear. Quite hard to screenshot too as you only see the issue when scrolling, and whilst scrolling I can't take a screenshot :/
Any ideas where I'm going wrong?
I've read numerous posts on this site but nothing quite hit what I was after.
Thanks.
This ended up working for me:
<ScrollViewer Height="Auto" Grid.Row="1">
<TextBlock x:Name="auditText" Text="TextBlock"
VerticalAlignment="Top" Foreground="Black" Margin="0,10,0,0" Grid.Row="1" Padding="20" TextWrapping="Wrap">
</TextBlock>
</ScrollViewer>
Setting the ScrollViewer height to AUTO