Can we add tiles in one of the sections in panorama or i need to implement it using button(changing the style of the button, so that it appears like a tile)
There is no tile control, so you'll have to create your own. You can do this by styling a button, like you said, or using an Image control.
There is no framework control that gives a tile layout. However, it is very easy to template Buttons so that they are simply rectangular squares of colour, allowing you to use them as tiles:
<DataTemplate x:Key="TileTemplate">
<Button Width="160" Height="160"
Margin="10">
<Grid>
<Rectangle Fill="{StaticResource PhoneAccentBrush}"/>
<ContentPresenter Content="{TemplateBinding Content}"/>
</Grid>
</Button>
</DataTemplate>
You can then host them within a Silverlight Toolkit WrapPanel
This is an old post, but a project does now exist. Take a look at the TileSlider project
Related
I created a solution (see code here) from a blank Xamarin Forms template, running the latest stable version of Xamarin Forms. I added the experimental Shapes and SwipeView as required into my native projects, and I have a list of rows just saying "Hello" inside a Collection View.
I attempted to add a semicircle shape to the right swipe item's Grid, so it looks like the row has a rounded edge instead of rectangular shape.
But as you can see in the image below, the Shape just disappears after swiping to the right the second time. And occasionally the shape won't even appear in the row's swipe item.
Please note that the label always displays though, its just the shape going away. Also tested in Android & noticed the same behaviour. Do you know what the issue might be and if there's a work around?
Edit: Posted this and got a response to create an issue. Still looking for a workaround though
You can use Frame with CornerRadius to achieve the result:
<StackLayout Orientation="Horizontal" Padding="0" Margin="0" Spacing="0">
<Label
Text="Left"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" />
<!--<Path HorizontalOptions="EndAndExpand" Fill="White" Stroke="White" Aspect="Fill" Data="m0.19956,-0.20844l14.43749,0l0,0c7.97347,0 14.43748,6.51981 14.43748,14.56254c0,8.04265 -6.464,14.5625 -14.43748,14.5625l-14.43749,0l0,-29.12504z" >
<Path.RenderTransform>
<RotateTransform CenterX="14.637"
CenterY="14.3541"
Angle="180" />
</Path.RenderTransform>
</Path>-->
<Frame BackgroundColor="Yellow" CornerRadius="30" IsClippedToBounds="True" HeightRequest="30" WidthRequest="30" HorizontalOptions="End" Margin="0,0,-51,0">
</Frame>
</StackLayout>
I am using pivot control to display full sizes multiple image on the screen as a flip view. But the problem with pivot is that it is taking empty space between two pivot items. How to eliminate this space?
If any other solution is available to display images as Flip view,please share.
I used FlipView control by Kinnara fork's as a datatemplate of ListBox:
<ListBox Background="AntiqueWhite" x:Name="FlipViewList" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemTemplate="{StaticResource DataTemplate2}"/>
<DataTemplate x:Key="DataTemplate2">
<Grid Height="200">
<toolkit:FlipView x:Name="ImagePivot" Height="200" ItemsSource="{Binding imageCollection}" Tag="{Binding}" IsLocked="False" Grid.ColumnSpan="1" Grid.RowSpan="1">
<toolkit:FlipView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Height="200" Width="480">
<Image Stretch="Fill" Source="{Binding images}" Height="200" Width="480"/>
</Grid>
</DataTemplate>
</toolkit:FlipView.ItemTemplate>
</toolkit:FlipView>
</Grid>
</DataTemplate>
Everything works fine but the vertical scrool is not working for listbox. How to resolve this scrool issue?
The problem here is there's no FlipView provided by msdn for the WP8 platform where as it's been added to the 8.1 version:
How to add a flip view
There are two options or even could be more, but i'm mentioning here two of them:
1) You could try out the Telerik SlideView control:
WinRT FlipView like control in WP8
Sample has been given here.
2) Or else you could go for the FlipView provided by Kinnara's fork.
I had a similar problem, so I decided to use my own custom XAML control. Basically, you can have a StackPanel that holds the images, and house that StackPanel within a Horizontally Scrolling ScrollViewer, and can modify the scrolling so that it scrolls 1 item at a time. the Images can be given a margin before adding them to the StackPanel, and that's how you can achieve the spacing between them. Check this out for instructions and a sample - https://quirkd.wordpress.com/2015/01/18/make-your-own-swipe-carousel-control/
i have used wrappanel to arrange images within a listbox but in my picture collection some images have different sizes. Some are horizontal and some are vertical. Due to different orientation, there is some spaces between the images which is not so good in vision. Can any body suggest me any way to remove these spaces?
thanks
i am using following code but still the problem is same...
<ListBox Name="lstBoxMyRecentPhotos"
MaxHeight="650"
Margin="0,8,0,0"
SelectionChanged="lstImageList_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit1:VariableSizedWrapGrid ItemHeight="200" ItemWidth="230" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="brdr"
Margin="5"
BorderBrush="White"
BorderThickness="3">
<Border.Background>
<ImageBrush ImageSource="Images/capsule_image_holder.png" Stretch="Uniform" />
</Border.Background>
<Image Width="{Binding width}"
Height="{Binding height}"
Hold="imgRecent_Hold"
Source="{Binding photoUrl}"
Stretch="UniformToFill">
</Image>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Two ways
Make the image always stretch UniformToFill and use hardcoded size - that way it will uniformly fill the space that it's been given and all the photos will use the given space nicely
Use VariableSizedWrapGrid.
Provides a grid-style layout panel where each tile/cell can be
variable size based on content. Similar to the WinRT
VariableSizedWrapGrid.
I don't know which toolkit you are using for the VariableSizedWrapGrid, but are you sure that you need to set its ItemHeight? What happens if you don't?
I'm personally using Telerik's controls to give me a WrapGrid. If you have access to their controls, I can share an example.
Here's what my implementation looks like:
I am using a Grid view and have defined two elements, WebBrowser and an Image, to be contained inside that Grid.
<Grid x:Name="ContentPanel" Background="Black">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Bottom" HorizontalAlignment="Center"></Image>
</Grid>
I want the image to come over WebBrowser view at bottom. But with WebBrowser visible Image is not showing up. Can someone help me to fix it. I don't want to resize the WebBrowser to some smaller height.
And also how does order of defining elements inside a Grid affects the view?
EDIT:
I used Canvas to contain both of these. Works fine now.
the image should be show as apparently nothing is wrong with your code. It might be that image color and opened web page color is same that is why image might not be visible. or some issue with image path or build action of the image.
the last UI element will be on top all other UI elements in the gird. as per your xaml image control will be top of the webbrowser control but at the bottom of the grid.
There is no mistake in your code but still if you are facing this Problem
Try this:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
Grid.RowSpan="2"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/ApplicationIcon.png" Stretch="None" VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.Row="1"></Image>
</Grid>
The Order of Defining UI Elements Overlaps the Previos Defined Control
If you right click the object in design mode you should be able to order the objects on the application page?
I need to create an Image Button for my application like web-oriented style.
I have an image 20x20 pixel and want an image button with the same dimension of the image.
I tried to set this inside my xaml but it doesn't work:
<Button Grid.Row="0" Margin="0" Padding="0" Click="AddtoFavorite_Click" Width="20" Height="20" VerticalAlignment="Top" HorizontalAlignment="Right">
<Button.Content>
<Image Source="/MyNamespace;component/images/star_yellow.png" Margin="0" Width="20" Height="20" />
</Button.Content>
</Button>
What is wrong?
SOLUTION
I found the best solution is:
<Image Source="/MyNamespace;component/images/star_yellow.png" ManipulationStarted="Image_ManipulationStarted" Width="20" Height="20"></Image>
Thanks to all!
I don't see particular errors in your code but I don't have the tools right now to test it ans see why it fails.
However you can create a VisualBrush with your image and use it as background for your Button:
<Button>
<Button.Background>
<ImageBrush ImageSource="xyz.png"/>
</Button.Background>
</Button>
Most Backgrounds are of type Brush, so you can use SolidColorBrush, LinearGradientBrush, ImageBrush, etc. You are not limited to colors.
I think the best solution is the following:
<Button ...>
<Button.Template>
<ControlTemplate>
<Image .... />
</ControlTemplate>
</Button.Template>
</Button>
Using manipulation started will result in subtly non-standard behaviour. On most buttons if you click on it but then drag off, the button click will not fire. However, if you use ManipulationStarted it will fire immediately.
The best way to manage these design time considerations is to use Expression Blend. In blend you can right click on the button and edit the template through the design tools, which makes knowing how to edit the xaml less important. It's really worth the effort to learn to use Blend.
This is old but I thought I would offer what I thought was a better solution here. Some of these solutions want you to replace the button with an image, or the background with an imagebrush. That's fine except it also surrounds the image with the normal button style, a black or white box (depending on your theme).
This solution lets you use an image as the button itself while maintaining the complete fidelity of a button but without having to subclass an object like the link by SilverGeek.
First, create a new style (either in your App.xaml or your page resources)
<Style x:Key="ImageButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Image x:Name="StartButtonImage" Source="/Images/YourImageFile.png"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content=""/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Now, just create a button anywhere using that style:
<Button Style={StaticResource ImageButtonStyle}/>
And add click events or whatever else you want. The button will take on the entire style of the image.
Maybe you will be interested in this article:
http://silvergeek.net/2011/01/14/imagebutton-control-for-win-phone-7/
The Button control can take most controls as its content (not just text), so you don't need an "image button" - instead, you simply need to put an Image control inside your Button like so:
<Button>
<Image Source="http://www.richmondwiki.org/images/search-button.png"></Image>
</Button>
This approach (as opposed to using an ImageBrush for the Button background) means that you don't have to worry about or hardcode the sizes of the Image/Button - WP7 will handle this for you.
Using the provided Button control instead of hooking into the manipulation events is recommended, so that you won't have to worry about things like having appropriate margins for touch targets, etc.
You can set your image as the background for the button, or if you want to do it as content, in theory it should work inside a stackpanel.
You don't even need to use a Button.
You can hook the MouseLeftButtonUp event on the Image control.
<Image
Source='blue02.png'
Width='26'
Height='26'
Margin='5'
MouseLeftButtonUp='Image_MouseLeftButtonUp' />