2 TextBlocks in ScrollView. - windows-phone-7

I'm developing a page, that needs 1 article in bold and second normal.
Texts can be very long, so I need a scroll view of the page. Example of the page:
And here is the code of my Grid.Row that is Content:
<ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Width="auto" Height="auto" Grid.Column="0" Grid.Row="0" Name="ArticleContent" />
</Grid>
</ScrollViewer>
When I run this code - nothing apears on the screen

Nothing is being displayed you have not set the text of the textblocks.
You can set text manually by Text = "fdjhldjfgldkgd"
or you can use binding Text ="{Binding asd}".
One more thing you should also set the foreground of the textblock as black or any desired color.
If your text length is too much and you want to wrap the the text then you will have to use TextWrapping = Wrap
hope this might help..

Set your TextBlock's Text property to the content that you want in there
<TextBlock Text="Hello"/>
If it needs to be bound to a data backend this could be done either in code behind or through wpf
<TextBlock Text="{Binding x}"/>
or
Binding B = new Binding("x");
BindingOperations.SetBinding(ArticleContent, TextBlock.TextProperty, B);
Hope this helps?

Related

Adding labels on both ends of a progress bar in Xamarin Forms

I have a progress bar in Xamarin Forms defined in my XAML.
Actually I want to add labels beneath the progress that shows the minimum and maximum value of the progress bar as shown in the image below:
My XAML code:
<StackLayout Orientation="Vertical" Margin="5">
<Frame Padding="10"
BackgroundColor="White"
HeightRequest="80">
<Frame.Content>
<Label Text="%" HorizontalTextAlignment="End" FontSize="Small"/>
<ProgressBar x:Name="myProgressBar" WidthRequest="100"
HeightRequest="15" VerticalOptions="Center" HorizontalOptions="Center" Progress="0.2"/>
</Frame.Content>
</Frame>
</StackLayout>
Can someone please help me to achieve this in Xamarin Forms ? Also, how can I add a gradient color like in the image ?
For the text, you would probably want to use labels positioned under the progressbar. I'd recommend a grid with two rows.
As for the gradient, unfortunately the xamarin forms progress bar doesn't support this out of the box. You can either create a custom renderer for each platform that draws the gradient, or consider a third party control like Syncfusion's (https://www.syncfusion.com/products/xamarin/progress-bar)
You can make a custom Xamarin Forms control.
The content could be something like that:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5* />
<ColumnDefinition Width="0.5* />
</Grid.ColumnDefinition>
<Image x:Name="gradientImage" Grid.Row="0" Grid.ColumnSpan="2" Margin="10,10,10,0" />
<Frame x:Name="progressFrame" Grid.Row="0" Width="{Binding Progress}" HorizontalOption="End" BackgroundColor="Gray" ... />
<!-- Labels -->
<Label x:Name="startLbl" Grid.Row="1" Grid.Column="0" Text="{Binding startLabel}" HorizontalOption="Start" />
<Label x:Name="endLbl" Grid.Row="1" Grid.Column="1" Text="{Binding endLabel}" HorizontalOption="End" />
</Grid>
For the gradient progress bar, instead of CustomRenderers you can use an image.
this image will be the full width gradient bar
over this image, like a MASK, there is a frame. You have to compute the frame width depending on the progress value. ==> It will 'make appear" the gradient image smotthly when progress will increase.
Hope you understand the concept :)
Then in the code behind (in your ViewModel ?) manage the start/end label values and the computation of the "progress" value... I presume you will have to make a Binding Converter for: "progress" ==> "bar Width"...
Tell me if it's clear
Wanted to comment on above answer from #KFactory but don't have permission yet.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5* />
<ColumnDefinition Width="0.5* />
</Grid.ColumnDefinition>
Has a few typos. missing end quotes and s on closing tag. Should be
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>

Image Will Not Aspect Fit/Fill While Inside ScrollView

I have a Grid with a few Rows defined. Within one of those rows is a single ScrollView. That ScrollView has a Grid with a single Image inside that's used as a sort of BackGround Image for one section. No matter what I do I cannot get the Image to Fill, AspectFill or AspectFit inside the Parent Grid (I have also tried a StackView to no avail). If I eliminate the ScrollView and pull the Grid and Image out the Image will Fit or Fill just fine.
Here is a stripped down example of what I'm doing:
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition Height="4"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0"> ... </Grid>
<Grid Grid.Row="1"> ... </Grid>
<ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" Grid.Row="2">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<!-- THIS IMAGE WILL NOT FILL! -->
<Image Source="{local:EmbeddedImage Project.Mobile.Images.fieldBackground.png}" Aspect="Fill" />
</Grid>
... More Code ...
</ScrollView>
</Grid>
No matter what I do the Image will not Fill the Grid Parent. If I remove the ScrollView it works just fine like this but I cannot do this without a ScrollView because I have more content directly below that cannot fit on the screen.
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition Height="4"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0"> ... </Grid>
<Grid Grid.Row="1"> ... </Grid>
<Grid Grid.Row="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<!-- THIS IMAGE FILLS FINE! -->
<Image Source="{local:EmbeddedImage Project.Mobile.Images.fieldBackground.png}" Aspect="Fill" />
</Grid>
</Grid>
As a workaround I attempted to not aspect fit/fill the image but to anchor it at the top of the Grid and let it fill horizontally. But I cannot get the image to fit any other way inside the Grid besides centered vertically no matter what I try. If I make the Grid the exact height of the image it almost works but it looks different between iOS and Android. This seems like such a simple thing? What am I missing? I've wasted hours on this so far.
Thanks,
Any help is appreciated!
I would put the background image outside (below) the scrollview.
If you put both elements inside the same row/column in a grid, they will overlap.
The first child is at the back of the Z stack, the second child is placed above it, and so on.
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition Height="4"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0"> ... </Grid>
<Grid Grid.Row="1"> ... </Grid>
<Image Grid.Row="2" Source="{local:EmbeddedImage Project.Mobile.Images.fieldBackground.png}" Aspect="Fill" />
<ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" Grid.Row="2">
... Insert your elements here ...
</ScrollView>
</Grid>

Xamarin forms Grid sizing issue

I'm new to Xamarin so excuse me if this is very obvious.
I added a Grid to my ContentPage. I want the grid to occupy the entire ContentPage, which I assume is the full size of the device. In my case I'm testing an iPhone 6S simulator.
The first row should be 7.58% of the total height of the Grid and the last one should fill in the rest. I add the label to see where the bottom of the last row is and it shows all the on the top. It looks like it's ~7% from the top which means it's the bottom of the 1st row.
<Grid x:Name="layoutGrid" HorizontalOptions="Fill" VerticalOptions="Fill">
<Grid.RowDefinitions>
<RowDefinition Height=".0758*"/>
<!-- Logo -->
<!-- Remaining Space -->
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".154*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width=".154*" />
</Grid.ColumnDefinitions>
<Image Aspect="Fill" Source="{local:ImageResource App1.Resources.background.png}" Grid.ColumnSpan="3" Grid.RowSpan="11"/>
<Image Aspect="AspectFit" x:Name="settingsImage" Grid.Column="2" Grid.Row="0" Source="{local:ImageResource App1.Resources.settings-17-xxl.png}" HorizontalOptions="End"/>
<Label x:Name="lblTest" Grid.Row="1" Text="Bottom" TextColor="White" VerticalOptions="End" HorizontalOptions="Center" FontSize="18"/>
It looks like you are placing two items in the same space, which you can not do in a grid. IOW the first image in the XAML (it seems you want this across the entire grid?) does not have a row and column set, but defaults to row/column 0. Then your column span is 3 and row span is 11(?). You only have two rows, so that makes no sense. Also you then can not place the second image in Row 0 column 2 as that is already occupied by the first image. You may want to set the first image as a page background. Or use an Absolute or Relative layout in which you can overlay items. A grid does not allow overlaid items as far as I know. Also you have your vertical options for the label set to "End" which will place it at the bottom of row 1, not the top. Try the following XAML to see if that is closer to what you want:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1"
x:Class="App1.MainPage"
BackgroundImage="{local:ImageResource App1.Resources.background.png}">
<Grid x:Name="layoutGrid" HorizontalOptions="Fill" VerticalOptions="Fill">
<Grid.RowDefinitions>
<RowDefinition Height=".0758*"/>
<!-- Logo -->
<!-- Remaining Space -->
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".154*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width=".154*" />
</Grid.ColumnDefinitions>
<Image Aspect="AspectFit" x:Name="settingsImage" Grid.Column="2" Grid.Row="0" Source="{local:ImageResource App1.Resources.settings-17-xxl.png}" HorizontalOptions="End"/>
<Label x:Name="lblTest" Grid.Row="1" Text="Bottom" TextColor="White" VerticalOptions="Start" HorizontalOptions="Center" FontSize="18"/>
</Grid>
</ContentPage>

Windows Universal App (10) Hiding Bar

I'm creating universal application on windows 10, where I can create simple list.
And I have problem. I would like to create hiding top bar. When user swipe down, bar fade in to screen from top (something like status bar, when swipe it shows all content). Can you give my any tips where I should look for solution or gave me one? I use also GestureRecognizer but it does not work well with Scroll Viewer.
Here is my User Control with bar:
<Grid>
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Fill="DarkOrange" Grid.Row="0" Margin="0"/>
<TextBox Name="TextBox" KeyDown="TextBox_KeyDown" Grid.Row="0" Margin="-2,5,2,13" Style="{StaticResource TextBoxStyle1}" Grid.RowSpan="2"/>
<Polygon Grid.Row="1" Points="0,0, 40,25, 0,50" Fill="DarkOrange" Margin="172.584,-30.584,186.416,-7.25" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" >
<Polygon.RenderTransform>
<CompositeTransform Rotation="90"/>
</Polygon.RenderTransform>
</Polygon>
</Grid>
Here is page where I would like to use this bar:
<Grid Background="Black" Name="LayoutRoot" PointerPressed="OnPointerPressed" PointerReleased="OnPointerReleased" Margin="0,-76,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="49*"/>
<RowDefinition Height="309*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" Name="scrollViewer" VerticalScrollMode="Enabled" ManipulationMode="All" ManipulationStarted="ScrollViewer_ManipulationStarted" DirectManipulationCompleted="ScrollViewer_DirectManipulationCompleted" DirectManipulationStarted="ScrollViewer_DirectManipulationStarted" IsEnabled="True" >
<StackPanel Name="sc" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollMode="Enabled">
</StackPanel>
</ScrollViewer>
</Grid>
Finally, I stared looking for pull to refresh. And I found this! pull to refresh Sample
Very nice samples :)

How do get a Grid column to Auto size to content but not clip the content if it gets too large?

I have a DataGrid embedded inside the first column of a Grid. I want the grid column to auto size to content, but when I do this and the DataGrid gets too wide (when columns are added by the user) the DataGrid is clipped by the containing column. Essentially I need to retain the scrolling behaviour of the DataGrid, but have the DataGrid shrink to content and never be clipped.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
<Border x:Name="LayoutRoot" Background="White">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="Auto" />
</Grid.ColumnDefinitions>
<Border><!--Toolbar content goes here--></Border>
<data:DataGrid
MaxHeight="350"
Grid.Row="1" />
</Grid>
</Border>
Have you tried something like:
<ColumnDefinition Width="Auto" MinWidth="80" MaxWidth="200"/>

Resources