I have a scrollViewer
<ScrollViewer Padding="0" VerticalScrollBarVisibility="Auto" VerticalScrollMode="Enabled" BorderBrush="DarkGray" BorderThickness="2" Name="thumbView" HorizontalAlignment="Right" Margin="0,86,0,0" VerticalAlignment="Top" Width="230" Height="606">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" x:Name="scrollStackPanel"/>
</ScrollViewer>
The problem is for Windows application i want the height to fill entire height of screen. Right now 606 is good for 13" monitors but for big monitors its half way only. I want it to spread to entire screen height. How can i do it?
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" should work.
And this part you should delete.
Margin="0,86,0,0" Width="230" Height="606"
Try this and tell me if its work.
Greetings!
Related
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?
The kind of effect I am looking to achieve is,
------------------- some text ---------------------
such that if the phone goes landscape, the rule will stretch (hence AFAIK the Line element is not suitable).
Can this be done easily in XAML?
Ok figured it out,
<Grid Margin="0">
<Border BorderThickness="0,2,0,0" BorderBrush="White" Margin="0,15,0,0" />
<Border Background="Black" HorizontalAlignment="Center" Padding="5,0" >
<TextBlock TextWrapping="Wrap" Text="some text" HorizontalAlignment="Center" >
</Border>
</Grid>
The first Border top margin has to be adjusted such that it aligns at the midpoint of the text.
I have a horizontal ScrollView implemented and working. however, when I Scrol horizontally he walks, but when he returns to deslargo initial position no reason for it.
Anyone know a solution?
Thanks
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled" Height="50" Width="Auto">
<StackPanel Name="sp_urlsHome" Orientation="Horizontal" Height="50" Width="Auto">
<TextBlock Text="adasdasdsasdfffffffffffffffffffffffffsdfsdfsdfsdfsfsdfdas"/>
</StackPanel>
</ScrollViewer>
You must set right ScrollViewer Width. Inner control will scroll only if it Width is greater that ScrollViewer Width. Check that moment, please (ScrollViewer should not resize while increasing content size)
Just posted your code into blank page and it works fine
If they are available for use in our client, where can we find them?
They're the same icons returned from foursquare with a bit of XAML magic to remove the borders.
This is how I was able to reproduce the effect (a special nod to Jeff Wilcox for the hint, he did it first with 4th & Mayor):
<Grid Width="150" Height="150">
<Border BorderBrush="#FFFFFFFF" BorderThickness="2">
<Grid Opacity="0.40">
<Image Width="100" Source="https://foursquare.com/img/categories/arts_entertainment/arcade_64.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
<!-- create a border with same color as icon background and make borders large enough to cover the border of the icon in the lower right corner -->
<Border BorderBrush="#FFFFFFFF" BorderThickness="60,60,10,10"/>
</Grid>
</Border>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Microsoft Arcade" VerticalAlignment="Top" Foreground="#FFFFFFFF" FontFamily="Segoe WP Black" Margin="5,0"/>
</Grid>
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>