I am trying to change the size of the PanoramaItem's title, but it doesnt work. I tried the FontSize attribute, but it does nothing. I could change the font size of the Panorama's title using this code:
<controls:Panorama.TitleTemplate>
<DataTemplate>
<TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="100" Margin="0,50,0,0" />
</DataTemplate>
</controls:Panorama.TitleTemplate>
Try setting Panorama.HeaderTemplate instead of TitleTemplate
It usually helps to open controls in Expression Blend when trying to style them for the first time, It makes it very easy to see all the different templates involved and their default values.
Related
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'm using Xamarin.Forms and I haven't found out how to have a multiline label for UWP. In my real project I have the label in a Grid on a ViewCell in a ListView. For the below example I've put it into a StackLayout:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label x:Name="titleLabel" Text="some long text" LineBreakMode="WordWrap" />
<Label x:Name="valueLabel" Text="perhaps a much, much, much, much, much, much, much, much, much longer text" LineBreakMode="WordWrap" />
</StackLayout>
The code is working on iOS and Android, but not on UWP. Here the text gets cut off. If only one label and no StackLayout is used it appears correctly on UWP with the multiline text.
I also tried to use a custom renderer with a multiline TextBlock as label, but the result was the same - the text is cut off.
Is this a bug or am I missing something?
Edit:
Now I made a UWP project
<StackPanel Orientation="Horizontal">
<TextBlock Text="oh this is a label" TextWrapping="Wrap" />
<TextBlock Text="and this should be a very, very, very, very, very, very, very, very, very, very long text" TextWrapping="Wrap" />
</StackPanel>
and here the text is also cut off. It seems it isn't possible in UWP. Are there any other solutions/workarounds?
If you set a WidthRequest for each label, the multiline label is correctly displayed (by growing in height).
An alternative solution is e.g. putting the label into a Grid and use a fixed column width.
The reason for that behavior could be that StackLayout has a default width of Auto (if nothing explicitly set) and the label doesn't know how big it could be. If you set a width, the label can grow up to that size.
This post brought me on the idea.
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 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>