Use Viewbox to scale a control within a grid - c#

I have a control that I want to scale both vertically and horizontally as the window is resized. Also, I have controls on both left and right sides of the middle control, that I want to align to it. How can I achieve this?
Currently I'm able to scale vertically, but not horizontally. The controls on left and right side are cut rather than the middle control being scaled.
In short, I want to achieve this, while also achieving the left image above.
Here's how the control looks in reality.
My current XAML:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid ShowGridLines="True" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="Left" Grid.Column="1"
BorderThickness="5" BorderBrush="Red"
Height="100" Width="150"
VerticalAlignment="Center">
<TextBlock Text="Left" />
</Border>
</Grid>
<Viewbox x:Name="Middle" Grid.Column="1" Stretch="Uniform">
<Border BorderThickness="2" BorderBrush="Black"
Height="100" Width="60">
<TextBlock Text="Middle" />
</Border>
</Viewbox>
<Grid ShowGridLines="True" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Right" Grid.Column="0"
BorderThickness="5" BorderBrush="Red"
Height="100" Width="150"
VerticalAlignment="Center" HorizontalAlignment="Right">
<TextBlock Text="Right" />
</Border>
</Grid>
</Grid>


try this
<Grid>
<Grid HorizontalAlignment="Center">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="Left"
Grid.Column="2"
Width="150"
Height="100"
VerticalAlignment="Center"
BorderBrush="Red"
BorderThickness="5">
<TextBlock Text="Left" />
</Border>
</Grid>
<Viewbox x:Name="Middle"
Grid.Column="1"
Stretch="Uniform">
<Border Width="60"
Height="100"
BorderBrush="Black"
BorderThickness="2">
<TextBlock Text="Middle" />
</Border>
</Viewbox>
<Grid Grid.Column="2" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Right"
Grid.Column="0"
Width="150"
Height="100"
HorizontalAlignment="Right"
VerticalAlignment="Center"
BorderBrush="Red"
BorderThickness="5">
<TextBlock Text="Right" />
</Border>
</Grid>
</Grid>
</Grid>
</Grid>


Here's the final solution, based on #Rise's answer. This way I was able to remove the grids around the side controls as well.
<Grid ShowGridLines="True" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="Left" Grid.Column="0"
BorderThickness="5" BorderBrush="Red"
Height="100" Width="150"
VerticalAlignment="Center">
<TextBlock Text="Left" />
</Border>
<Viewbox x:Name="Middle" Grid.Column="1" Stretch="Uniform">
<Border BorderThickness="2" BorderBrush="Black"
Height="100" Width="60">
<TextBlock Text="Middle" />
</Border>
</Viewbox>
<Border x:Name="Right" Grid.Column="2"
BorderThickness="5" BorderBrush="Red"
Height="100" Width="150"
VerticalAlignment="Center" HorizontalAlignment="Right">
<TextBlock Text="Right" />
</Border>
</Grid>

Related

Binding DropShadowTextBlock into a DataTemplate

I'm trying to bind a DropShadowTextBlock (Like a TextBlock) But it is not possible because it is inside a DataTemplate, so it stays outside the form's tree.
I tried some ways I found here in the forum but no situation fit with mine.
Here's my XAML:
<Blacklight_Controls:DragDockPanel Background="White" x:Name="panel4" Header="Exams" d:LayoutOverrides="Width, Height" Maximized="Panel4Maximized" Restored="Panel4Restored" Minimized="Panel4Minimized" Margin="7">
<Blacklight_Controls:DragDockPanel.HeaderTemplate >
<DataTemplate >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Blacklight_Controls:DropShadowTextBlock
Text="{Binding TituloModelo}"
FontFamily="Verdana"
FontSize="11"
VerticalAlignment="Center"
Margin="1"
TabIndex="1000"
DropShadowDistance="0"
DropShadowAngle="45"
Foreground="Black">
</Blacklight_Controls:DropShadowTextBlock>
<Image Grid.Column="2"
code/>
<Image Grid.Column="3"
code"/>
<Image Grid.Column="4"
code"/>
</Grid>
</DataTemplate>
</Blacklight_Controls:DragDockPanel.HeaderTemplate>
<Grid>
<Grid x:Name="name0" />
<localControls:LastExam x:Name="nameLastExam"/>
<Grid x:Name="name1" Visibility="Collapsed" />
<Grid x:Name="name2" Visibility="Collapsed" />
<Grid x:Name="name3" Visibility="Collapsed" />
</Grid>
</Blacklight_Controls:DragDockPanel>
How can I do it?

How to design this site menu style in WPF

I am trying to implement www.devexpress.com menu.
But I do not know what to do to implement the unfolding details below.
this is my source file.
enter link description here
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MenuTest02"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="MenuTest02.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="579.8" Width="1600" WindowState="Maximized">
<Window.Resources>
<Style x:Key="styleTopMenu" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Microsoft JhengHei"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
x:Name="mnuContent" Margin="0"/>
<Border Grid.Column="1" Grid.Row="0" BorderBrush="Gray"
BorderThickness="0,0,1,0" HorizontalAlignment="Right"
Height="30" VerticalAlignment="Center" Width="1"/>
<!--
<Polyline Name="mnuTriangle" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="2" Visibility="Visible"
Points="0,10 10,0 20,10 0,10" Fill="#FF313131"/> -->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="BlueViolet"/>
<!-- <Setter TargetName="grdProductsSubmenu" Property="Visibility" Value="True"/> -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- <GridLength x:Key="GridLength1">1195</GridLength> -->
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition x:Name="grdMainDisplay" Width="1195" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Top border -->
<Border Grid.Row="0" Grid.ColumnSpan="3" Background="#FF4A4A4A" Width="Auto" Height="26"/>
<!-- bottom Line in menu -->
<Border Grid.Row="1" Grid.ColumnSpan="3" Background="Transparent" Width="Auto" Height="1" BorderBrush="Gray" BorderThickness="0,1,0,0" VerticalAlignment="Top" Margin="0,66,0,0"/>
<!-- Top Menu -->
<Grid Grid.Column="1" Grid.Row="1" Height="66" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="images\logo.png" HorizontalAlignment="Right" Height="66"/>
<!--
<Border Grid.Column="2" BorderBrush="Gray" BorderThickness="0,0,1,0" HorizontalAlignment="Right" Height="30" VerticalAlignment="Center" Width="1"/>
<TextBlock Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontSize="18" Text=" Products " />
-->
<Button Grid.Column="2" Content=" Products " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="3" Content=" Free Trials & Demos " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="4" Content=" Buy " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="5" Content=" Support " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="6" Content=" My Account " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="7" Content=" About Us " Style="{StaticResource styleTopMenu}"/>
<Image Grid.Column="8" Source="images\cart_blogs_search.jpg" Margin="30,0,0,0" Height="54" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="1" Margin="0,56,0,0" Height="10" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top">
<Polyline x:Name="triProducts" Margin="320,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triFreeTrials" Margin="480,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triBuy" Margin="620,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triSupport" Margin="705,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triMyAccount" Margin="830,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triAboutUs" Margin="950,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Margin="0,66,0,0" Height="Auto" Visibility="Hidden"
VerticalAlignment="Top" Background="#FF313131" x:Name="grdProductsSubmenu" Panel.ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="0,0,0,0" Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" >
<Grid Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<TextBlock Text="Suites" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="BEST VALUE" Margin="0,10,0,10" FontSize="14" Foreground="Orange"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FFF88E1D" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0" Text="Universal" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,15" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="products in one integrated suite)"/></TextBlock>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FF406EA4" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0,0,0,0" Text="Dxperience" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,0" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="Controls along with CodeRush)"/></TextBlock>
</Grid>
<Rectangle VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,50,0,0"
Fill="#FF4C4C4C" Height="50" Width="230" RadiusX="2" RadiusY="2"/>
<TextBlock Margin="0,-50,0,0" FontSize="14"
Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="Compare Features"/><LineBreak/><Run Text="and Pricing"/>
</TextBlock>
</StackPanel>
<Border Grid.Row="1" Grid.Column="1" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical">
<TextBlock Text=".NET Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="INDIVIDUAL PLATFORMS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="WinForms" FontSize="14" Foreground="White"/>
<TextBlock Text="ASP.NET" FontSize="14" Foreground="White"/>
<TextBlock Text="MVC" FontSize="14" Foreground="White"/>
<TextBlock Text="WPF" FontSize="14" Foreground="White"/>
<TextBlock Text="Windows 10 Apps" FontSize="14" Foreground="White"/>
<TextBlock Text="CROSS-PLATFORM" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Reporting" FontSize="14" Foreground="White"/>
<TextBlock Text="Document Automatoin" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical" Margin="220,24,0,0">
<TextBlock Text="ENTERPRISE TOOLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Report Server" FontSize="14" Foreground="White"/>
<TextBlock Text="Analytics Dashboard" FontSize="14" Foreground="White"/>
<TextBlock Text="FRAMEWORKS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="eXpressApp Framework" FontSize="14" Foreground="White"/>
<TextBlock Text="CODE-DEBUG-REFACTOR" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="CodeRush for Visual Studio" FontSize="14" Foreground="White"/>
</StackPanel>
<Border Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<Grid Grid.Row="1" Grid.Column="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock Text="HTML JS Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="HYBRID APPS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DevExtreme Moboile" FontSize="14" Foreground="White"/>
<TextBlock Text="DevExtreme Web" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Xamarin.Forms" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="UI CONTROLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Free Data Grid" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Vertical">
<TextBlock Text="iOS" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="NATIVE" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DataExplorer" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Testing Tools" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="WEB TESTING" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="TestCafe" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Vertical">
<TextBlock Text="Delphi & C++Builder Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="DELPHI & C++BUILDER" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="VCL" FontSize="14" Foreground="White"/>
</StackPanel>
</Grid>
</Grid>
</StackPanel>
</Grid>
<!-- Main Display -->
<Grid Grid.Column="1" Grid.Row="1" Height="Auto" Margin="0,66,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center">
<Run Text="(includes all DevExpress.Netl"/>
<LineBreak/>
<Run Text="Controls along with CodeRush)"/>
<LineBreak/>
<Run Text="Some Text..."/>
</TextBlock>
<Path Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" Data="M50.0000011012083,0.5L99.5000021617096,99.5L0.00000040707015,99.5z" Stroke="Black"
StrokeThickness="4" Fill="Yellow"/>
</Grid>
</Grid>

you can set a grid with 4 columsn and 2 rows.
In each of the upper cells you place one of the section names
In the bottom row you place one panel with the details, set its property Grid.ColumnSpan = 4 Grid.Column = 0 grid.row = 1 so it spreads through the whole section. (I think this part is pretty ok in your code) and visibility=visible opacity=1
Then you hook to the on mouse enter for each of the upper elements and when entering, you set the opacity of all the lower panels to 0, but the desired one to 1.
This will show the desired panel with no animation. When you have it working, to achieve the animation you need to use DoubleAnimation and animate the opacity property of the other to zero instead of just setting it.
Please let us know if you find particular problems in your way

LongListMultiSelector Data Template stretches outside screen width - windows phone 8

I've the following pivot control in my application
<phone:PivotItem Header="{Binding Path=LocalizedResources.requests_title, Source={StaticResource LocalizedStrings}}" >
<Grid Margin="0,-12,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" >
<TextBlock FontWeight="Bold"
TextDecorations="Underline"
VerticalAlignment="Top"
TextWrapping="NoWrap"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Foreground="{StaticResource PhoneAccentBrush}"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
<toolkit:PhoneTextBox AcceptsReturn="False"
TextWrapping="NoWrap"
Visibility="Collapsed"
TextChanged="SearchBox_TextChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
</StackPanel>
<toolkit:LongListMultiSelector Grid.Row="1"
ItemsSource="{Binding Details_OC}"
SelectionChanged="Requests_SelectionChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,24,0">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0.25" BorderBrush="{StaticResource PhoneAccentBrush}">
<Grid Background="{StaticResource TransparentBrush}" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Top" >
<TextBlock Text="#" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock x:Name="ID"
Text="{Binding ID}"
FontSize="{StaticResource PhoneFontSizeLarge}"
TextWrapping="NoWrap"/>
</StackPanel>
<TextBlock x:Name="date"
Text="{Binding Path=TIME, Converter={StaticResource dateConverter}}"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="{StaticResource PhoneFontSizeSmall}"
TextWrapping="NoWrap"/>
</Grid>
</Border>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
</phone:PivotItem>
The result appears as follows
You can see that the date Textblock is not appearing fully. I couldn't find the reason for this unexpected behavior. Please help.
Thank you.

The problem appears to be in the sizing of your columns. See the following, inside the <toolkit:LongListMultiSelector.ItemTemplate>:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
In this case I would give the first column a static width and then the second can fill the remaining space. Like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Alternatively you may wish to take a look into the ItemInfoTemplate property of the LongListMultiSelector.
It gives you the ability to display a second column at the far right which does not get squashed over by the checkboxes when they become active.
An example can be found here.

How to stretch StackPanel to FullScreen

I have ItemDetailPage.xaml with FlipView, inside of DataTemplate i have Grid with come columns. One of columns contains StackPanel with some controls.
Example:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
<Grid Margin="120,0,20,20" x:Name="richTextColumns">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" Margin="0,0,0,10" x:Name="ContentPanel">
<TextBlock FontSize="22" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap" />
<Image x:Name="image" Width="200" Margin="0,10,0,10" Stretch="UniformToFill" Source="{Binding Image}"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<RichTextBlock x:Name="InformationOriginalName" Width="250"
Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
<Paragraph>
<Run FontWeight="SemiLight" Text="{Binding EvaInformation.OriginalName}"/>
</Paragraph>
</RichTextBlock>
</StackPanel>
</StackPanel>
....
</Grid>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
How to stretch ContentPanel to FullScreen and hide all different controls, including Back button and title of page?

LongListSelector focus on item

I have this LongListSelector in my app page:
<Controls:LongListSelector x:Name="searchList" Margin="0,0,0,0" Background="White" SelectionChanged="DidPressSelectSearchList" HorizontalContentAlignment="Stretch" Grid.Row="1">
<Controls:LongListSelector.ItemTemplate>
<DataTemplate>
<local:SearchTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch">
<local:SearchTemplateSelector.GoogleSuggestTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3"/>
<TextBlock Text="{Binding}" FontSize="25" Foreground="Black" TextWrapping="Wrap" Grid.Row="1" Margin="0,10"/>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.GoogleSuggestTemplate>
<local:SearchTemplateSelector.VideoTemplate>
<DataTemplate>
<Grid>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Margin="0" Source="{Binding Path=ImgUrl}" HorizontalAlignment="Left" Width="100" Height="100" Tag="{Binding idStr}"/>
<Grid Grid.Column="1" Margin="10,0,8,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" FontSize="20" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<StackPanel Orientation="Horizontal" Margin="0,-5,0,0" Grid.Row="1">
<TextBlock Text="Views: " FontSize="20" Foreground="Black"/>
<TextBlock Text="{Binding ViewCount}" FontSize="20" Foreground="Black"/>
</StackPanel>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TimeStr}" FontSize="20" Foreground="Black" Margin="0,0,0,0" />
<TextBlock Text="Cached" FontSize="20" Foreground="Red" Margin="20,0,0,0" Grid.Column="1" />
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.VideoTemplate>
</local:SearchTemplateSelector>
</DataTemplate>
</Controls:LongListSelector.ItemTemplate>
</Controls:LongListSelector>
And i noticed that when i press a item in the list so the user not have any thing to know which item he pressed, something like focus the item when he press it.
In iPhone the the selected row get blue and when release the blue selection is disappear,there is some equivalent to this in windows phone too?

Use TiltEffect from Silverlight Toolkit for Windows Phone, details are here http://www.geekchamp.com/articles/silverlight-for-wp7-toolkit-tilteffect-in-depth. Also to make an effect more expressive use Button as a container for your ItemTemplate with EmptyButtonStyle http://www.jeff.wilcox.name/2011/10/hyperlinkbutton-empty-style-for-phone/.

Categories