Set image to the max height of grid - windows-phone-7

In my XAML I have a listview. The item template of the listview contains a grid. This grid has 4 columns and 2 rows. Like so:
I want the left column be filled with an image and a colored bar under the image. My core problem is that the image will most of the time determine the height of the item. While the image max height is supposed to be defined by the rest of the item. So minimal 100 (Grid MinHeight="125" - Height="25" of the rect). Or larger if the text makes the item larger. But the text is supposed to define the height of the item. Not the image.
My current xaml is the following:
<Grid MinHeight="125">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Path=BitmapImage}" Stretch="UniformToFill" />
<Rectangle Grid.Row="1">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Path=Color}" />
</Rectangle.Fill>
</Rectangle>
</Grid>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Name}" FontWeight="ExtraBold" TextWrapping="Wrap" FontSize="16" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}" TextWrapping="Wrap" FontSize="20" />
<TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" Text="{Binding Path=Type}" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="20" Margin="5" />
<TextBlock Grid.Row="0" Grid.Column="3" Text="{Binding Path=Distance, Converter={StaticResource DistanceConverter}}" FontSize="16" />
<Image Grid.Column="3" Grid.RowSpan="2" Source="/Images/appbar.next.rest.png" Stretch="Fill" Width="24" Height="24" />
</Grid>

http://darutk-oboegaki.blogspot.com/2011/07/binding-actualheight-and-actualwidth.html contains information on how to do this, accounting for the fact that in Silverlight, ActualHeight commonly gives a value of 0.
From there, if you need to subtract 25 pixels, you can:
Write a converter (an object that implements System.Windows.UI.Xaml.Data.IValueConverter)
Add an instance of the converter into the Resources of the page/window.
Add Converter={StaticResource MyConverter}, ConverterParameter=25 to your binding.
Hope that helps :)

Related

phone:WebBrowser how we can set Auto Height and Width?

<StackPanel Orientation="Vertical">
<TextBlock x:Name="articleDate" Foreground="Black" FontSize="20"
Text="Timefzdsaf" />
<Image x:Name="image" Stretch="Uniform" />
<StackPanel Orientation="Vertical">
<phone:WebBrowser Name="webBrowser1"
IsScriptEnabled="False" Background="White"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
></phone:WebBrowser>
</StackPanel>
phone:WebBrowser will not show in my page(if am not giving Height and Width i want it should take automatically). can any one help me to show html in phone WebBrowser?
Don't use the StackPanel. Try Grid with RowDefinitions. For WebBrowser set it to "*"
From your code (added Source just to demonstrate):
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="articleDate"
Foreground="Black"
FontSize="20"
Text="Timefzdsaf" />
<Image x:Name="image"
Grid.Row="1"
Stretch="Uniform" />
<phone:WebBrowser Name="webBrowser1"
Source="http://msdn.microsoft.com/en-US/"
IsScriptEnabled="False"
Grid.Row="2"
Background="White"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center">
</phone:WebBrowser>
</Grid>

WP7 - LongListSelector, how to hide vertical scroll bar

I need to hide vertical scrollbar in LongListSelector. For this I use:
ScrollViewer.VerticalScrollBarVisibility="Hidden"
In ListBox it works well but in LongListSelector it doesn't work.
This is my LongListSelector code:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<toolkit:LongListSelector x:Name="TasksLongListSelector"
Margin="0,12,0,0"
Background="Transparent"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<toolkit:LongListSelector.GroupHeaderTemplate>
<DataTemplate>
<Border Width="431"
Height="53"
HorizontalAlignment="Left"
BorderThickness="2"
BorderBrush="White"
Margin="13,0,0,22">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Key, Converter={StaticResource LocalDateConverter}}"
FontSize="20"
FontWeight="Bold"
Foreground="White"
HorizontalAlignment="Left"
Padding="14,10,0,0" />
<Image Grid.Column="1"
Source="/Images/CalendarWhiteIcon.png"
Width="21"
Height="21"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,13,14,0" />
</Grid>
</Border>
</DataTemplate>
</toolkit:LongListSelector.GroupHeaderTemplate>
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<Button Background="White"
Width="455"
Height="105"
Margin="0,-12,0,12"
Tag="{Binding Id}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Click="Button_Click_1">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<TextBlock Grid.ColumnSpan="4"
Text="{Binding Name}"
FontSize="24"
Foreground="#400000" />
<Image Grid.Row="1"
Visibility="{Binding Project, Converter={StaticResource StringToVisibilityConverter}}"
Source="/Images/ProjectIcon.png"
Width="20"
Height="18"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,0,5,0" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Visibility="{Binding Project, Converter={StaticResource StringToVisibilityConverter}}"
Text="{Binding Project, Converter={StaticResource ToUppercaseConverter}}"
FontSize="16"
Foreground="#666666"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,-2,9,0"
LineStackingStrategy="BlockLineHeight" />
<Image Grid.Row="1"
Grid.Column="2"
Visibility="{Binding Context, Converter={StaticResource StringToVisibilityConverter}}"
Source="/Images/ContextIcon.png"
Width="20"
Height="18"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="-3,1,1,0" />
<TextBlock Grid.Row="1"
Grid.Column="3"
Visibility="{Binding Context, Converter={StaticResource StringToVisibilityConverter}}"
Text="{Binding Context, Converter={StaticResource ToUppercaseConverter}}"
FontSize="16"
Foreground="#666666"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,-2,0,0"
LineStackingStrategy="BlockLineHeight" />
</Grid>
</Button>
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
</Grid>
How can I hide vertical scrollbar in LongListSelector?
I found solution. To LongListSelector event Loaded add this code:
ScrollViewer sv = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(TasksLongListSelector, 0), 0) as ScrollViewer;
ScrollBar sb = ((FrameworkElement)VisualTreeHelper.GetChild(sv, 0)).FindName("VerticalScrollBar") as ScrollBar;
sb.Width = 0;

Windows Phone : Text in textblock not showing fully

Problem solved!
Anyway, I just figured out the problem. I did a .Trim() on the values and surprisingly they can be wrapped. Thanks and sorry for all the trouble. =)
I am doing some data binding to my textblock in a grid.
However, some of the texts are not showing fully.
I tried the Text Wrapping and setting a maximum width to my textblock. But none of them worked.
EDIT : Hi again. I noticed that when I changed the text of the textblock manually via codes like
txtDesc.Text = "This is a job for Stackers. If you like stacking, please contact me.
The text wrapping actually works. So somehow the databind result text can't be wrap?
The XAML code for my textblock.
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize=" {StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>
Any help here?
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="images/SmallLogoNTitle.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ListPicker ItemsSource="{Binding}" Name="lpkTypeOfService" Margin="0,116,12,0" Height="65" VerticalAlignment="Top" HorizontalAlignment="Right" Width="210" SelectionChanged="lpkTypeOfService_SelectionChanged">
</toolkit:ListPicker>
<ListBox Margin="8,210,8,26" Name="listBox1" Width="450">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
<TextBlock HorizontalAlignment= "Left" Grid.Row="1" Grid.Column="0" Name="Creator" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
<TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
<TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>
<Button Content="Apply" Height="70" Width="140" Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Height="65" HorizontalAlignment="Left" Margin="12,116,0,0" Name="textBlock1" Text="Find Service :" VerticalAlignment="Top" Width="216" FontSize="36" />
</Grid>
</Grid>
It comes from poor / over-complicated layout architecture and the way your objects are positioning each other. Might try something like this for your DataTemplate
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!-- Don't worry, you already had your 450 Width set on the parent -->
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Name="Creator" Grid.Row="1" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
<TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" TextWrapping="Wrap"/>
<Button Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1" Content="Apply" Height="70" Width="140" Margin="5,0"/>
</Grid>
</DataTemplate>
Also for the sake of cleaner xaml, remember things like Margin="0", Grid.Column="0", HorizontalAlignment="Left" etc. are default dependency properties, so no need to set them to each individual object. Even in the case you need to, you can apply them as Setters to the TargetType in the parent Object.Resources and avoid setting them to each individual object. Another tip would be, don't rely on a bunch of obfuscated random Margins etc to create your layout. It's best to do it right the first time instead of hunting down discrepancies between a bunch of inter-dependent little "fixes"
I didn't test it, but should work fine unless you got something else somewhere pushing stuff around. Hope this helps.
Can you disable horizontal scrolling in your listbox control?
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Use VerticalAlignment="Stretch" instead of VerticalAlignment="Top". This way the textblock will stretch to the height of the row.

How to force element overflow Grid within it

I have following layout
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid Height="100" Background="Wheat" Opacity="0.4">
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
<Slider Orientation="Vertical" Height="170" HorizontalAlignment="Center" Background="White" />
<Button Content="Btn" Width="100"/>
</StackPanel>
</Grid>
</Grid>
In this scenario Grid will clip rest of Slider which overflows Grid.
So I’m getting result like this
While I want to get result like this
So how can I force Slider to overflow Grid without clipping? Is it any alternatives solutions to this?
In fact I have more complicated layout so using Canvas instead of Grid is now welcome.
You can do this using a single Grid and playing with its childrens' Grid.RowSpan and Grid.ColumnSpan properties.
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3"
Height="100"
Fill="Wheat"
Opacity="0.4" />
<StackPanel Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="1">
<Slider Orientation="Vertical"
Height="170"
HorizontalAlignment="Center"
Background="White" />
<Button Content="Btn"
Width="100" />
</StackPanel>
</Grid>

WP7 ListBox Scrolling Not Working

I have the following XAML markup in a WP7 UserControl. My problem is that when my ListBox has more items than will fit on a page it will not scroll properly. I can scroll the list by panning upwards with my finger but as soon as I remove my finger it jumps back to the top of the list (if the list is very long then the scrolling will not even work to this limited extent).
I have tried numerous different layouts with no success e.g. Wrapping ListBox in ScrollViewer, utilising StackPanel instead of Grid, removing the WrapPanel and replacing it with a grid.
Other similar questions suggested removing StackPanel (which I did but made no difference) or using ScrollViewer (which did not work).
The Page that hosts the UserControl uses a GestureListener - I removed that and it still made no difference.
<Grid x:Name="LayoutRoot"
Background="SteelBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--<TextBlock Grid.Row="0"
Text="Search"
Style="{StaticResource PhoneTextTitle2Style}" />-->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Search Type"
Grid.Column="0"
VerticalAlignment="Center" />
<RadioButton Content="RMB/RSD"
Grid.Column="1"
IsChecked="{Binding Path=SearchType, Converter={StaticResource enumBooleanConverter}, ConverterParameter=RMB, Mode=TwoWay}" />
<RadioButton Content="Name"
Grid.Column="2"
IsChecked="{Binding Path=SearchType, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Name, Mode=TwoWay}" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Search Term"
Grid.Column="0"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Text="{Binding SearchTerm, Mode=TwoWay}"
InputScope="{Binding SearchTermInputScope}">
<i:Interaction.Behaviors>
<b:SelectAllOnFocusBehavior />
</i:Interaction.Behaviors>
</TextBox>
</Grid>
<Button Grid.Row="2"
Content="Find"
cmd:ButtonBaseExtensions.Command="{Binding FindDeliveryPointsCommand}" />
<ListBox Grid.Row="3"
ItemsSource="{Binding SearchResults}"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:WrapPanel Orientation="Horizontal"
Width="480"
Background="{Binding RMB, Converter={StaticResource alternateColorConverter}}">
<TextBlock Text="{Binding RMB}"
FontSize="26"
Foreground="Navy"
Padding="5"
Width="60" />
<TextBlock Text="{Binding HouseholdName}"
FontSize="26"
Foreground="Navy"
Padding="5"
Width="420" />
<TextBlock Text="{Binding StreetWithRRN}"
FontSize="26"
Foreground="Navy"
Padding="5" />
<TextBlock Text="{Binding Street.Locality.Name}"
FontSize="26"
Foreground="Navy"
Padding="5" />
</toolkit:WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Specify ListBox.Height - something like Height="200". As it is now, ListBox expands automatically to accomodate all loaded items and it grows out of the screen. As a result you get large page with no scroller.
When you add ListBox.Height, the ListBox area won't grow. Instead ListBox ScrollViewer will be activated and you'll get the effect you need.
I use databinding when the ListBox's Height changed depending on the other controls on the page.
<StackPanel x:Name="ContentPanel" Grid.Row="1">
<ListBox x:Name="LstSample" Height="{Binding ElementName=ContentPanel, Path=ActualHeight}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImagePath}" Stretch="None"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" FontSize="45"/>
<TextBlock Text="{Binding Group}" FontSize="25"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>

Resources