I had set the Height of the ScrollViewer but it won't scroll. There are 9 images. The Wrappanel is set to show 2 images per row. But this shows only 3 row ( 6 images). What seems to be the problem?
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Height="500">
<toolkit:WrapPanel Margin="-3,-20,12,-3" Background="White" ItemHeight="200" Orientation="Horizontal" ItemWidth="200" Height="600" Width="480" FlowDirection="LeftToRight">
<Image Height="160" Name="image11" Source="/ImgBadges/Badge_1.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image12" Source="/ImgBadges/Badge_2.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image13" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image14a" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image15b" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image16c" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image17d" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image18e" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
<Image Height="160" Name="image19f" Source="/ImgBadges/Badge_3.png" Stretch="UniformToFill" Width="160" />
</toolkit:WrapPanel>
</ScrollViewer>
You have forced the height of the WrapPanel to 600. Change the height to be set onto the only on the ScrollViewer, so that the WrapPanel can have infinite space to add more items, while scrolling:
<ScrollViewer Height="500" ...>
<toolkit:WrapPanel ItemHeight="200" Orientation="Horizontal" ItemWidth="200" Width="480" FlowDirection="LeftToRight">
...
</toolkit:WrapPanel>
</ScrollViewer>
Summary: remove the height from the WrapPanel, so that more items can be added to it.
Related
I have a carousel from microsoft.toolkit
XAML:
<controls:Carousel
x:Name="k2006Carousel"
VerticalAlignment="Center"
ItemDepth="300"
ItemMargin="0"
ItemRotationX="0"
ItemRotationY="-40"
ItemRotationZ="0"
Orientation="Horizontal"
SelectionChanged="bukuCarousel_SelectionChanged">
<controls:Carousel.EasingFunction>
<CubicEase EasingMode="EaseInOut" />
</controls:Carousel.EasingFunction>
<controls:Carousel.ItemTemplate>
<DataTemplate>
-->
<!-- Carousel content -->
<!--
<Grid x:Name="k2006CarouselGrid" Background="{x:Null}">
<Grid PointerPressed="BukuUIElement_OnPointerPressed">
<Image
x:Name="cover"
Width="280"
Margin="0,10,0,10"
HorizontalAlignment="Center"
Source="{Binding Image}"
Stretch="Uniform" />
</Grid>
<Rectangle
Grid.Row="1"
Height="140"
Margin="0,0,0,-130"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#801B1B1B" />
<GradientStop Offset="0.259" Color="#661B1B1B" />
<GradientStop Offset="0.681" Color="Transparent" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</DataTemplate>
</controls:Carousel.ItemTemplate>
</controls:Carousel>
From the xaml above, the output is like the image below:
I want the margin between items to be 0 (no margin), like the image below:
How to apply it?
For your requirement, you could set suitable negative value for ItemMargin.
ItemMargin="-150"
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'm coding a simple windows phone 7.5 localization application.
I've changed the default pushpin template as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="allPushpinsTemplate">
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
</Grid>
</ControlTemplate>
When I click on a pushpin, I handle the event and change the template of the selected pin as :
<ControlTemplate TargetType="maps:Pushpin" x:Key="detailedPushpinTemplate">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<StackPanel >
<Grid Background="Black">
<StackPanel Margin="5,5,0,0">
<TextBlock Text="{Binding Adress}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ZipCode}" Foreground="White" />
<TextBlock Text="-" Foreground="White" Padding="3,0"/>
<TextBlock Text="{Binding City}" Foreground="White" />
</StackPanel>
<TextBlock Text="{Binding TelStd}" Foreground="White" />
<TextBlock Text="{Binding Email}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="email" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-mail.png" Width="40" Height="40" />
</Button.Content>
</Button>
<Button BorderBrush="Transparent" Click="Button_Click" CommandParameter="phone" ClickMode="Press">
<Button.Content>
<Image Source="/Images/Icons/icon-phone.png" Width="40" Height="40" />
</Button.Content>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
So that I can display some info and some commands. The result works perfectly and display a black rectangle with all my custom data.
But, the other pins (default template) overlap the rectangle and appears on the top of my selected pin and hide information.
Has anyone an idea to force the selected pin template to be always on top of the other pins ?
for information the XAML of my map :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Canvas >
<maps:Map ZoomBarVisibility="Visible" ZoomLevel="4" Center="46.8821,2.2697" Name="map1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Canvas.Top="0" Height="600" Width="460">
<maps:MapItemsControl x:Name="mapControl"/>
<maps:MapItemsControl ItemsSource="{Binding Locations}" >
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Location="{Binding Location}" Template="{StaticResource allPushpinsTemplate}" MouseLeftButtonDown="Pushpin_MouseLeftButtonDown"/>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
<maps:MapLayer Name="imageLayer"/>
</maps:Map>
<Button Content="some action" Height="70" HorizontalAlignment="Left" Margin="0" Name="button1" VerticalAlignment="Top" Width="170" Canvas.Left="140" />
</Canvas>
</Grid>
The only way I've been able to work around this default behaviour is to remove the original pin and then add a new one in the same position with the different template.
The newly added pin appears at the top in the Z-Order but I haven't been able to alter the Z-Order of existing pins once created.
Also remember to "reset" any pins in the selected state when the user clicks on another.
I guess this should help you: http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/c4055dba-3efd-4bf7-98b3-cd8e24d175ea
y my scrollviewer not scrolling till the end.it gets struck to a limited position.
i hav attached my xaml code.i placed a canvas inside the code.and the scrollviewer is inside 2 grids.
<ScrollViewer>
<Canvas Margin="0,0,0,0">
<toolkit:ListPicker x:Name="listPicker" ItemTemplate="{StaticResource PickerItemTemplate}"
FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" CacheMode="BitmapCache"
Header="" Margin="12,246,210,298" FontFamily="Yu Gothic" FontSize="22" FontWeight="SemiBold" Width="240" />
<toolkit:ListPicker x:Name="listPicker2" ItemTemplate="{StaticResource PickerItemTemplate}" ItemCountThreshold="3"
FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" CacheMode="BitmapCache"
Header="" Margin="9,343,210,206" Width="240" />
<toolkit:ListPicker CacheMode="BitmapCache" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" Header="" ItemCountThreshold="3" ItemTemplate="{StaticResource PickerItemTemplate}" Margin="12,440,210,108" Name="listPicker1" Width="240" />
<toolkit:ListPicker CacheMode="BitmapCache" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" Header="" ItemCountThreshold="3" ItemTemplate="{StaticResource PickerItemTemplate}" Margin="11,546,210,2" Name="listPicker3" Width="240" />
<TextBlock Height="40" HorizontalAlignment="Left" Margin="30,212,0,0" Name="textBlock1" Text="MONTHLY DEBTS" VerticalAlignment="Top" Width="185" FontSize="24" />
<TextBlock Height="40" HorizontalAlignment="Left" Margin="290,212,0,0" Name="textBlock2" Text="AMOUNTS" VerticalAlignment="Top" Width="147" FontSize="24" />
<clrtb:ClearableTextBox Canvas.Left="246" Canvas.Top="242" Height="75" Name="qualifytb" Width="208" />
<clrtb:ClearableTextBox Canvas.Left="242" Canvas.Top="338" Height="75" Name="clearableTextBox1" Width="208" />
<clrtb:ClearableTextBox Canvas.Left="246" Canvas.Top="436" Height="75" Name="clearableTextBox2" Width="208" />
<clrtb:ClearableTextBox Canvas.Left="244" Canvas.Top="542" Height="75" Name="clearableTextBox3" Width="208" />
<TextBlock Text="DEBT RATIO" Canvas.Left="148" Canvas.Top="642" FontSize="26" FontWeight="Medium" />
<TextBlock Text="Conv Debt Ratio:" Canvas.Left="30" Canvas.Top="700" FontSize="26" FontWeight="Medium" />
<TextBlock Text="FHA Debt Ratio:" Canvas.Left="30" Canvas.Top="800" FontSize="26" FontWeight="Medium" />
<TextBlock Text="VA Debt Ratio:" Canvas.Left="30" Canvas.Top="900" FontSize="26" FontWeight="Medium" />
<clrtb:ClearableTextBox Canvas.Left="250" Canvas.Top="700" Height="75" Name="rt1" Width="208" />
<clrtb:ClearableTextBox Canvas.Left="320" Canvas.Top="700" Height="75" Name="rt2" Width="208" />
<clrtb:ClearableTextBox Canvas.Left="250" Canvas.Top="800" Height="75" Name="rt3" Width="208" />
<clrtb:ClearableTextBox Canvas.Left="320" Canvas.Top="800" Height="75" Name="rt4" Width="208" />
<clrtb:ClearableTextBox Canvas.Left="250" Canvas.Top="900" Height="75" Name="rt5" Width="208" />
</Canvas>
</ScrollViewer>
I found this SO question: ScrollBars are not visible after changing positions of controls inside a Canvas, which is basically a similar problem. The question is WPF-specific but can be applied to WP/Silverlight just as well.
The problem is Canvas will always return a DesiredSize of (0, 0), so the ScrollViewer will never think it needs to scroll.
The solution is simple: just use a StackPanel or Grid instead of the Canvas. If you really need the Canvas, you have to override MeasureOverride.
Canvas is not the right layout panel to be using, it's going to produce weird behavior the way you're using it. It's meant to be used when you need finite control over positioning and you are willing to write significant logic to support edge cases that pop up. Try using Grid, and configure it with columns and rows.
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