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?
Related
I want to load multiple SVG images in Gridview of my UWP app. But every time after app launch, it takes some time to show those images and the area for this time being remains blank which is not user friendly. But if I use png images, it performs normally. There are total 9 items in this gridview, so total 9*2=18 svg images(each 55 kb). Can anyone suggest, how to load these svg images faster in uwp?
<GridView ItemsSource="{Binding Items}"
IsItemClickEnabled="True">
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding Normal,Mode=OneWay}" Visibility="{Binding NormalVisibility, Mode=OneWay}"/>
<Image Source="{Binding Selected, Mode=OneWay}" Visibility="{Binding SelectedVisibility, Mode=OneWay}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I like to put a Border in a Grid using Xaml.
I found these code
`<Border BorderBrush="Black" BorderThickness="2">
<Grid>
<!-- Grid contents here -->
</Grid>
</Border>`
But it doesn´t work.
I'm a novice yet in this, I want to do a Table with some information.
There is no Border control in Xamarin.Forms, however you can use a Frame
<Frame OutlineColor="YourColor" BackgroundColor="Transparent" Padding="0">
<Grid>
</Grid>
</Frame>
Note the OutlineColorproperty, and the Padding, sometimes people forget that Frame as a default Padding that can overlap their childs.
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:
Here piece of code.I can not see the images individually. The scroll goes for inertia
<ListBox x:Name="list" Grid.Row="1" Width="480" ScrollViewer.ManipulationMode="Control" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImagePath}" Stretch="Fill" Width="480"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
but not work.
Help me!
If you want the more OS like look and feel ( like how images are shown in the pictures lib ), take a look at the nuget called Windows Phone Media Viewer ( https://www.nuget.org/packages/PhoneMediaViewer/ ).
There is even a sample app where it's been used up on MSDN ( http://code.msdn.microsoft.com/wpapps/Basic-Lens-sample-359fda1b )
you can use pivot control as parent and add images as pivot items, and you can swipe horizontally.
or you can
1) use stack panel as parent
2)and add images inside a stack panel
3)set its orientation as horizontal
4)use a horizontal scroll viewer as parent of stack panel.
hope this helps.
Thank you.
I have this code:
<ScrollViewer x:Name="textScroller" Grid.Row="2">
<Grid x:Name="ContentPanel" Margin="12,0,12,0" DataContext="{Binding}">
<Image x:Name="ImageUrl" Source="{Binding ImageUrl}" Height="198" Width="150" Margin="10 10 10 10" FlowDirection="RightToLeft" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock x:Name="Content" Text="{Binding Content}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" Margin="0,41,24,-41" LineStackingStrategy="BlockLineHeight" MaxWidth="478" />
</Grid>
</ScrollViewer>
Image in this code is background of that textblock but I want that text wrap around the imgae. Is it posible? I found this similar question and there is answer it isn´t posible just with image and textblock. Is it right? I really can´t set some attribute in image that set that text can´t be on image? How should I change my code?
Thanks
Edit: Now this is what my page looks like:
I want that text should be on the right side of the image and the below of the image.
It is a duplicate of WP7 wrap text around image and Silverlight text around an image, though these questions did not come up with accepted answers yet either. There is no such option in Silverlight to do automatic wrapping of text around images. You can use a WebBrowser component or use multiple TextBlocks by measuring the size of the text while adding words to the TextBlocks in memory and checking when to stop and switch to another TextBlock. I recommend reading an article on font metrics for that too - MSDN - UI Frontiers: Font Metrics in Silverlight, Charles Petzold.
EDIT: Hard-coded sample:
You can use the below code to do what you ask in a hard-coded fashion. Perhaps you could write some code that would make it work as a control - automatically splitting the text by detecting the height of the nested TextBlock that is next to the Rectangle (or Image).
<RichTextBox
VerticalAlignment="Top"
>
<Paragraph
TextAlignment="Left">
<InlineUIContainer>
<InlineUIContainer.Child>
<Rectangle
Width="50"
Height="50"
Fill="Red" />
</InlineUIContainer.Child>
</InlineUIContainer>
<InlineUIContainer>
<Border>
<TextBlock
Padding="0"
Width="370"
Margin="0,0,0,-5"
TextWrapping="Wrap"
Text="First part of text that fits to the right of the image before the other part wraps to">
</TextBlock>
</Border>
</InlineUIContainer>
<Run
Text="the next line. This part of the text is already below the image." />
</Paragraph>
</RichTextBox>