I have an Image control bound to a source. Here is what I want:
If the source image is smaller than the Grid containing it, it should display at its original size. It should not stretch beyond 100%. This is behavior of setting Stretch="None".
If the source image is larger than parent Grid, it should be resized uniformly to fit the container. This behavior is available with Stretch="Uniform".
I have tried to bind MaxWidth and MaxHeight to parent's actual dimensions as follows:
<DataTemplate x:Key="ImageDataTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0"/>
<TextBlock Text="{Binding Type}" Grid.Row="1"/>
<Grid x:Name="ImageWrapper" Grid.Row="1" Tapped="ImageWrapper_Tapped" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue">
<Image Source="{Binding Link}" MaxWidth="{Binding ActualWidth, ElementName=ImageWrapper}" MaxHeight="{Binding ElementName=ImageWrapper, Path=ActualHeight}"/>
</Grid>
</Grid>
</DataTemplate>
However, I just end up with no image at all. Parent Grid occupies all available space as can be seen from background color. But there's no image.
Is there a way to achieve behavior I want?
Put the Image in a Viewbox control and set the Viewbox's StretchDirection to DownOnly. The Stretch property of the Viewbox has a default value of Uniform, so you don't need to set it.
<Viewbox StretchDirection="DownOnly">
<Image Source="{Binding Link}" Stretch="None"/>
</Viewbox>
Perhaps worth to note, in WPF you could directly set the StretchDirection of the Image control, and thus would not need a Viewbox.
<Image Source="{Binding Link}" StretchDirection="DownOnly"/>
Related
I want to place an image at top left of screen. and a TextBlock at center of same line as image placed. Means at the top of screen there should be an image at left and a TextBlock at center. I tried like below. But both image and TextBlock are seems to be aligned at center.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="AliceBlue" VerticalAlignment="Top">
<Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50" />
<TextBlock Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70" />
</StackPanel>
Just use a Grid and set HorizontalAlignment as Left and Center for Image and TextBlock respectively
<Grid VerticalAlignment="Top">
<Image HorizontalAlignment="Left"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
You can try the following code :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50"/>
<TextBlock Grid.Column="1" Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70"/>
</Grid>
What this code will do is divide your grid into 3 Columns and place the <Image> in the 1st Column (Grid.Column="0") and <TextBlock> in the 2nd Column (Grid.Column="1"). You can additionally change the alignment of Image and Texblock if you need to.
Also, it is good to note that StackPanel will always override the Horizontal alignment of the Child elements when you are setting its orientation as horizontal. This is the reason why using a grid and dividing it into multiple rows and columns is better in scenarios like this.
Edit :
Since you have quite a large textblock you can change the column definitions to something like this :
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
This will divide your grid into 2 parts with the column widths set automatically.
Hope this helps.
I have a UWP where I am loading from an XML file and showing it in a GridView and I am trying to enable Scrollbars in a way that allows me to stack and wrap items in all the available space like in the image below. The problem that I am having is that I cannot figure out how to enable the scrollbars so that I can scroll the boxes until I get to the end of the list.
So far I have got it to do what you see in the picture, which is wrapped the way I want but it fills all the available space and doesn't allow you to scroll vertically or horizontally (I only want to scroll one way but I have tried to see if I could go either way). Through a lot of trial and error I was able to get it to scroll one row or one column at a time to the end of the list but that is not the desired result either. Here is where I am with the XAML right now (trimmed down version of the screen shot).
<GridView x:Name="DataGrid1">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Border Width="270"
Height="200"
Margin="5"
BorderBrush="Black"
BorderThickness="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="100*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Background="#87CEFA">
<TextBlock Margin="2"
HorizontalAlignment="Center"
FontSize="16"
FontWeight="Bold"
Text="{Binding Company}" />
</StackPanel>
<TextBlock Grid.Row="1"
Grid.Column="0"
Margin="2"
HorizontalAlignment="Right"
FontWeight="Bold"
Text="Code: " />
<TextBlock Grid.Row="1"
Grid.Column="1"
Margin="2"
Text="{Binding Code}" />
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
So what do I need to do to enable the scrollbars the way that I want?
Make sure your GridView is in a Grid and not a StackPanel. It does not expand in a StackPanel.
To make it scroll in a StackPanel you have to specify the height of the GridView. This was the issue with mine :)
To my knowledge gridviews that are not showing scrollbars automatically are due to stackpanel's presence. So my solution here is to try remove stackpanel what so ever, and if I find the stackpanel that's responsible replace it with other kind of panel and work my way back up. It's totally a brute force kind of approach but it works most of the time.
And another piece of advice. In that process of replacing the stackpanel try to replace it with grid and try to divide it's rows and columns with widths and heights set to auto or star sizing instead of specifying it with actual numbers to see if it works this way. If it works then work your way up speicifying it with actual numbers.
Here's your problem, in the definition of the ItemsWrapGrid you have:
ScrollViewer.VerticalScrollBarVisibility="Disabled"
this is going to mean that even if the scrollbar is shown it wont work.
Remove this line and you should get a working scrollbar.
I have a ListViewdefined in a Grid like this:
<Border BorderThickness="1" Grid.Row="1" VerticalAlignment="Top" Margin="0,0,0,50" BorderBrush="Gray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Test" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ListView
Grid.Row="1"
ItemsSource="{Binding MyItems}"
Padding="40,40,40,40"/>
</Grid>
My problem is that I want the last item of the listview to be 40 pixel away from listView's bottom, but my code is not working, the top padding is ok, but bottom has no effect. That is like adding a blank item on the beginning and the end of the listview but that would be a stupid thing to do.
You can put the ListView inside of another Scrollviewer and pad the ListView itself.
In this XAML I can scroll Contents grid up and down a bit even though it does not exceed the ScrollViewer height.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Controller" Grid.Row="0">
<controls:SearchField x:Name="Searcher" />
</Grid>
<ScrollViewer x:Name="Scroller" Grid.Row="1">
<ScrollViewer.Content>
<Grid x:Name="Contents">
<TextBlock Text="HI" />
</Grid>
</ScrollViewer.Content>
</ScrollViewer>
</Grid>
I guess it is a standard behavior of some kind but I don't like it too much. It it possible to make ScrollViewer not to scroll it's contents if they don't exceed ScrollViewer's height?
I've a problem. I've a textblock and my text is cropped. It seems to appear only when the text is too long cause when the text is shorter, there is no problem.
So there is my code :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="447*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding TheContent.PathPicture}" />
<ScrollViewer Grid.Row="1">
<Grid>
<TextBlock Text="{Binding TheContent.Text}" TextWrapping="Wrap" FontSize="24" />
</Grid>
</ScrollViewer>
</Grid>
Text is croping like this :
Is the only solution to summary my content ?
The depth of a single textblock is limited to about 2000 pixels on WP7. You need to divide up your text into multiple blocks to display it all.
Controls are limited to 2k square, but there's a fairly straight forward resolution in breaking your text up and presenting the blocks in a stackpanel and wrapping that in a ScrollViewer.
Alex Yakhnin demonstrates here.
Creating Scrollable TextBlock for WP7.