i'v developed few windows phone applications, but never interacted with the animation.
now i required a animation in a tile, the xaml is given below
<Grid Height="250">
<StackPanel Height="700" x:Name="stackPanel" VerticalAlignment="bottom">
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_f6bce20b-cb91-41d8-80fb-36524e1e6e46_ProfilePic.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_0b3b5606-8cf3-4a33-8292-e62f7785a224_tes.JPG"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_1c59768b-3419-48e4-805b-e78ca8d82b71_d.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_f6bce20b-cb91-41d8-80fb-36524e1e6e46_ProfilePic.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_0b3b5606-8cf3-4a33-8292-e62f7785a224_tes.JPG"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_1c59768b-3419-48e4-805b-e78ca8d82b71_d.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_f6bce20b-cb91-41d8-80fb-36524e1e6e46_ProfilePic.jpg"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_0b3b5606-8cf3-4a33-8292-e62f7785a224_tes.JPG"></Image>
<Image Width="50" Height="50" Stretch="Fill" Source="http://localhost:5141/Images/28/28_1c59768b-3419-48e4-805b-e78ca8d82b71_d.jpg"></Image>
</StackPanel>
</Grid>
in above the Grid (Height = 250) contains a stackPanel (Height = 500) which contains some images, but Grid's height is less than stackPanel's height, so all images in stackPanel cant be shown at a time, so i want to rotate this stackPanel in upwards/downwards , more illustrative diagram is given below
any help to appreciate ?
thanks
Related
I have problem to customize the buttons' size in my stack panel. I made one experiment with Rectangle, it looks perfect, here is the code in the XAML:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Rectangle Width="170" Height="170" Fill="Bisque" Margin="10,0,0,0" />
<StackPanel Orientation="Vertical" Margin="10,0,0,0">
<StackPanel Orientation="Horizontal">
<Rectangle Width="80" Height="80" Fill="Azure" />
<Rectangle Width="80" Height="80" Fill="Azure" Margin="10,0,0,0" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Rectangle Width="80" Height="80" Fill="Tomato" />
<Rectangle Width="80" Height="80" Fill="Azure" Margin="10,0,0,0" />
</StackPanel>
</StackPanel>
</StackPanel>
Here is the screen shot:
But, when I remove those Rectangles to Buttons,
like these in the XAML:
<Button x:Name="Btn2" >
</Button>
<Button x:Name="Btn3" Width="40" Height="40" Margin="11,0,0,0" >
</Button>
it looks not what i want:
I can't resize those 2 buttons. How to get a quick solution for this?
Buttons in WP8.1 have deafault minimum width - MinWidth property - try changing it and it should help.
A side note - consider using Grid panel instead of StackPanel for positioning elements. If you define some Rows and Columns, your app should scale correctly when used on different devices.
I have created a custom canvas which I would need to stretch behind two textblocks.
Heres the entire code
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Canvas HorizontalAlignment="Stretch" Height="45" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<Rectangle Height="30" Stroke="Black" Width="70" RadiusY="17.167" RadiusX="17.167" Canvas.Top="15">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF096016"/>
<GradientStop Color="#FF0FEF6F" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse Height="5" Width="5" RenderTransformOrigin="0.5,0.45" Fill="White" Stroke="Gray" Canvas.ZIndex="2" Canvas.Left="33"/>
<Ellipse Height="5" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A" Canvas.Left="17" Canvas.Top="18"/>
<Ellipse Height="5" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A" Canvas.Left="48" Canvas.Top="18"/>
<Path Data="M143.5,193.5 C127.75,210.5 127.75,210.5 127.75,210.5" Height="17" Stretch="Fill" UseLayoutRounding="False" Width="15.75" Canvas.Left="19.75" Canvas.Top="3.5"/>
<Path Data="M128,209 L141.99998,192.16666" Height="17.833" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" Width="15" Canvas.Left="20" Canvas.Top="2.167"/>
<Path Data="M143.5,192.16699 L158.08334,210.25" Height="19.083" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" Width="15.583" Canvas.Left="35.5" Canvas.Top="2.167"/>
</Canvas>
<TextBlock Height="30" Margin="0,20,0,0" TextAlignment="Right" Name="priceTextblock" Text="{Binding Price}" VerticalAlignment="Top" FontFamily="Calibri" FontWeight="Bold"/>
<TextBlock Width="50" Margin="5,20,0,0" Height="30" TextAlignment="Left" Name="currencyTextblock" Text="{Binding SelectedCurrency.code}" VerticalAlignment="Top" Grid.Column="1" FontFamily="Calibri" FontWeight="Bold"/>
</Grid>
though the horizontal alignment is set to stretch nothing is happening. What am I missing, please help.
Thanks in advance
EDITS
Using Grid instead of canvas
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" Height="45" VerticalAlignment="Top" Width="70">
<Rectangle Margin="0,15,0,0" Stroke="Black" RadiusY="17.167" RadiusX="17.167">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF096016"/>
<GradientStop Color="#FF0FEF6F" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse Height="5" Margin="33,0,32,0" VerticalAlignment="Top" Stroke="Gray" RenderTransformOrigin="0.5,0.45" Fill="White" Canvas.ZIndex="2"/>
<Ellipse HorizontalAlignment="Left" Margin="17,18,0,22" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A"/>
<Ellipse HorizontalAlignment="Right" Margin="0,18,17,22" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A"/>
<Path Data="M143.5,193.5 C127.75,210.5 127.75,210.5 127.75,210.5" Height="17" Margin="19.75,3.5,34.5,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top"/>
<Path Data="M128,209 L141.99998,192.16666" HorizontalAlignment="Left" Height="17.833" Margin="20,2.167,0,0" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" VerticalAlignment="Top" Width="15"/>
<Path Data="M143.5,192.16699 L158.08334,210.25" HorizontalAlignment="Right" Height="19.083" Margin="0,2.167,18.917,0" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" VerticalAlignment="Top" Width="15.583"/>
</Grid>
<TextBlock Height="30" Margin="0,20,0,0" TextAlignment="Right" Name="priceTextblock" Text="{Binding Price}" VerticalAlignment="Top" FontFamily="Calibri" FontWeight="Bold"/>
<TextBlock Width="50" Margin="5,20,0,0" Height="30" TextAlignment="Left" Name="currencyTextblock" Text="{Binding SelectedCurrency.code}" VerticalAlignment="Top" Grid.Column="1" FontFamily="Calibri" FontWeight="Bold"/>
</Grid>
You need to set column width to *. It tells to get all available space
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
I tried to overlap the border with an image inside but i found it unable to apply while i saw some application are able to do so. Any idea?
<Border BorderBrush="White" BorderThickness="1" Margin="20,20" Height="120" Width="410" >
<StackPanel Orientation="Horizontal">
<Canvas>
<Image Margin="-30,0,0,45" VerticalAlignment="Top" Source="{Binding Path=ListboxImage}" Width="100" Height="150" />
</Canvas>
<StackPanel>
<TextBlock Margin="135,8" Width="300" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Text="{Binding Path=ListboxName}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
<TextBlock Margin="150,0,0,8" Width="300" VerticalAlignment="Top" HorizontalAlignment="Left" Text="{Binding Path=ListboxDescription}" />
</StackPanel>
</StackPanel>
</Border>
While i tried to add some shadow effect to the border.
<Border>
<Border.Effect>
.......
</Border.Effect>
</Border>
but it seem to be doesn't support the effect.
+ I found some forum said that they took off the effect due to performance~
Any idea how to do so?
Hi I find it for you man... Try this you can get overlapped image in the border
<ListBox ItemsSource="{Binding alldata}" Height="500" HorizontalAlignment="Left" Margin="12,160,0,0" Name="listBox3" VerticalAlignment="Top" Width="438" Background="Black">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="White">
<StackPanel Height="250" Orientation="Vertical" Name="stackPanel1" Width="400" >
<Border Margin="30,40,0,120" BorderThickness="1" BorderBrush="White">
<Canvas Height="100">
<TextBlock Text="Catalogue" Margin="160,50"> </TextBlock>
</Canvas>
</Border>
<Image Height="150" Width="160" Margin="-400,-400,-200,0" Source="{Binding image}">
</Image>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
in mainpage.cs add the code
Uri uri = new Uri("http://d1mu9ule1cy7bp.cloudfront.net/2012/media/catalogues/47/pages/p_"+ i +"/thump.jpg", UriKind.Absolute);
ImageSource imgSource = new BitmapImage(uri);
Image image = new Image();
alldata data = new alldata(){image = img.source, text = "catalogue"};
public class alldata
{
public imagesource image
public string text
}
Try to have a rectangle and image inside a stack
<StackPanel Orientation="Horizontal">
<border>
<rectangle height="50">
<textblock text={}>
</rectangle>
</border>
<Image Margin="-30,0,0,45" height = "75"/>
</Stackpanel>
Try to align the margin of image to be in the left of stackpanel and the rectangle height should be less than the image height.Try to reduce the corner radius of rectangle this also helps.
I am trying to create listbox with images wrapped in a wrappanel. I want to show the items fit to screen. like if the items width is less than the available screen width then the items should be stretched and if the items width is greater than the available screen width then the items should jump to next row and empty space should be filled.
Code:
<ListBox x:Name="lst" Grid.Row="3" HorizontalAlignment="Left">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="Auto" Height="Auto" ite ItemWidth="Auto" ItemHeight="Auto"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<Border BorderThickness="2" Width="Auto" Margin="5,5,5,5" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
<Border BorderThickness="2" Margin="5,5,5,5" Width="Auto" Height="Auto" BorderBrush="Cornsilk">
<StackPanel Orientation="Vertical" Height="150" Width="150">
<Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
<TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
</ListBox>
Try adding the following container style to your ListBox:
<UserControl x:Class="MyClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Style x:Key="myContainerStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</UserControl.Resources>
<ListBox ItemContainerStyle="{StaticResource myContainerStyle}">
</ListBox>
</UserControl>
(Eventually you have to use PhoneApplicationPage instead of UserControl)
UPDATE: Removed HorizontalAlignment as proposed by Jared Bienz
I hope someone can help with what should be a very simple problem to solve... I've spent hours on this and it's just driving me crazy!
In my Silverlight WP7 app I have a ScrollViewer control that is 600x600 and offset to the left by 60 pixels (to center it horizontally) and in this I have a number of images overlayed on each other (see the code below).
I also have a Popup control defined which pops up while the images are downloading from the web but I just can't get the PopUp centered - and even worse, the text inside it is NEVER centered even though I've specified it to be... it always justifies left no matter what I try.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="600"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" Margin="-60,0,0,0" Height="600" Width="600" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="RadarImages" Margin="0,0,0,0">
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgBack" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="100" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgObs" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="100" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgLoop" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="100" />
<Popup x:Name="StatusPopup" Margin="-200,-100,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBox Text="...loading..." Width="200" Height="60" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Black" Foreground="White" BorderBrush="White" BorderThickness="3" />
</Popup>
</Grid>
</ScrollViewer>
</Grid>
I've tried adding a Grid inside the popup to explicitly control the layout with no joy: the darned PopUp just won't center on the screen and the text inside won't either.
Can anybody suggest what I need to do to fix this?
TIA...
Mike
I've managed to get the Popup content using the following XAML (I added a couple of fixed background colors to show where different elements are):
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="600"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" Margin="-60,0,0,0" Height="600" Width="600" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="RadarImages" Background="AliceBlue" Margin="0,0,0,0">
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgBack" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="1" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgObs" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="1" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgLoop" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="1" />
<Popup x:Name="StatusPopup" IsOpen="True">
<Border Background="Red" Height="768" Margin="60,0" Width="480">
<TextBox Text="...loading..." HorizontalAlignment="Center" VerticalAlignment="Center" Background="Black" Foreground="White" BorderBrush="White" BorderThickness="3" />
</Border>
</Popup>
</Grid>
</ScrollViewer>
</Grid>
Bascially, you can't use the Popup itself for position or alignment, you have to work with the root element inside the Popup instead.
One other thing: the valid range of values for Opacity are 0 to 1, not 100.