I want to make an Arabic windows phone 8 app , so i need to make my panorama view to swipe from left to right (The opposite direction in English language) i tried this
protected override void OnNavigatedTo(NavigationEventArgs e)
{
MainPanorama.DefaultItem = MainPanorama.Items[1];
if (!App.ViewModel.IsDataLoaded)
{
App.ViewModel.LoadData();
}
}
but the title goes the opposite direction , anyone have an idea ?
If you want that next panorama item seems to be on left, then you can play with CompositeTransforms. Something like this:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="PanoramaTitleTemplate">
<TextBlock Text="{Binding}"
FontSize="48"
Margin="12,24"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1" />
</TextBlock.RenderTransform>
</TextBlock>
</DataTemplate>
<DataTemplate x:Key="PanoramaItemHeaderTemplate">
<TextBlock Text="{Binding}"
FontSize="52"
MinWidth="380"
TextAlignment="Right">
</TextBlock>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<phone:Panorama Title="Panorama"
RenderTransformOrigin="0.5,0.5"
TitleTemplate="{StaticResource PanoramaTitleTemplate}">
<phone:Panorama.RenderTransform>
<CompositeTransform ScaleX="-1" />
</phone:Panorama.RenderTransform>
<phone:PanoramaItem Header="Header1"
RenderTransformOrigin="0.5,0.5"
HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
<phone:PanoramaItem.RenderTransform>
<CompositeTransform ScaleX="-1" />
</phone:PanoramaItem.RenderTransform>
<Grid Background="DarkBlue" />
</phone:PanoramaItem>
<phone:PanoramaItem Header="Header2"
RenderTransformOrigin="0.5,0.5"
HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
<phone:PanoramaItem.RenderTransform>
<CompositeTransform ScaleX="-1" />
</phone:PanoramaItem.RenderTransform>
<Grid Background="DarkCyan" />
</phone:PanoramaItem>
<phone:PanoramaItem Header="Header3"
RenderTransformOrigin="0.5,0.5"
HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
<phone:PanoramaItem.RenderTransform>
<CompositeTransform ScaleX="-1" />
</phone:PanoramaItem.RenderTransform>
<Grid Background="DarkGoldenrod" />
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
will the solution is very easy , there is a property on the panorama control named "FlowDirection" you change it like that
<phone:Panorama x:Name="MainPanorama" FlowDirection="RightToLeft">
Related
This question already has an answer here:
How do I place a text over a image in a button in WinRT
(1 answer)
Closed 5 years ago.
I am learning different ways of achieving certain layouts with XAML in UWP (I know I'm late to the party but I just started with the UWP stuff!)
What I am trying to achieve is a main navigation page kind of thing from a hub control on my main page. At every HubSection, I will have button on each column of a 2-column grid, which will contain buttons. Ive'tried something similar to this post but the debugger kept failing to attach to my UWP app when I used images instead of textblocks.
Essentially, what I've got until now is something like this: (I've shared my code down below)
But what I am trying to achieve is each button having its own image background and a separate TextBlock with semi-transparent background at the bottom centre of the button... (I've only photo shopped it, this is the thing I am trying to achieve...)
So this is what I've tried so far... I've also tried the relative panel but no luck...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Center">Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Grid>
My complete code looks something like this for this page.
<Page
x:Class="VaultManager.Terminal.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Black">
<Hub SectionHeaderClick="Hub_SectionHeaderClick">
<Hub.Header>
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="pageTitle" Text="My Hub Sample" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
</Grid>
</Hub.Header>
<HubSection Header="Overview">
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<RelativePanel>
<TextBlock>Column 0 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</RelativePanel>
</Button>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,10,10,10">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 1 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<StackPanel>
<TextBlock>Column 1 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="Videos" Name="Videos">
<!-- yada yada -->
</HubSection>
<HubSection Header="Audios" Name="Audios">
<!-- blah blah -->
</HubSection>
</Hub>
</Grid>
Good job giving us all that info. You may want to take a look here since the asker in that question seems to have had a similar issue. The answerer suggested using a Grid instead of a StackPanel. Hope that helps. After that, you should be able to adjust the transparency of the text. If you are using visual studio you can just click on the text element and adjust the background brush from the Properties tab. The button w/ the image should look like this:
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock Text = "Column 0 Item 1">
<TextBlock.Background>
<SolidColorBrush Color="(**Colour here**)" Opacity = "(**Opacity Here {1 being opaque and 0 being transparent}**)/>
</TextBlock.Background></TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
</Button>
Here is the xaml code to my graph:
<oxy:Plot HorizontalAlignment="Left"
Height="222"
Margin="0,49,0,0"
VerticalAlignment="Top"
Width="870"
Background="Transparent"
PlotAreaBorderColor="White"
LegendBorder="Transparent"
Name="viewCountPlot"
Title="Videos Watched"
TextColor="White" IsLegendVisible="False" IsManipulationEnabled="False" IsMouseWheelEnabled="False">
<oxy:Plot.Axes>
<oxy:DateTimeAxis Name="datetimeAxis" Position="Bottom" MajorGridlineColor="#40FFFFFF" TicklineColor="White" StringFormat="M/d/yy" IntervalType="Days" ShowMinorTicks="False"/>
</oxy:Plot.Axes>
<oxy:Plot.Series>
<oxy:LineSeries
Name="viewCountSeries"
Title="Videos Viewed"
DataFieldX="Date"
DataFieldY="Value"
Color="#CCFA6800"
StrokeThickness="2"
TrackerFormatString="Date: {2:M/d/yy}
Value: {4}"
ItemsSource="{Binding PlotItems}" MarkerStroke="#FFFDFDFD" />
</oxy:Plot.Series>
<oxy:Plot.DefaultTrackerTemplate>
<ControlTemplate>
<Canvas>
<Grid Canvas.Left="{Binding Position.X}" Canvas.Top="{Binding Position.Y}">
<Ellipse Fill="White" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TranslateTransform X="-6" Y="-6" />
</Ellipse.RenderTransform>
</Ellipse>
<TextBlock Foreground="{DynamicResource OrangeTextColor}" Text="{Binding}" Margin="-60 -40 0 0" />
</Grid>
</Canvas>
</ControlTemplate>
</oxy:Plot.DefaultTrackerTemplate>
</oxy:Plot>
In the plot Series is there any way to show the plot points as circles or something of that nature?
Here is an example image of what I mean, each plot point has a small circle associated with it:
From the linked discussion:
This should be covered by the Marker* properties in the LineSeries
See examples in the Example browser.
It looks like you have to set MarkerFill and MarkerType. To show only markers (and no line), set the Color to Transparent.
<oxy:LineSeries ItemsSource="{Binding MyDataPoints}"
Color="Transparent"
MarkerFill="SteelBlue"
MarkerType="Circle" />
Answered on the Oxyplot forums for those who find this.
https://oxyplot.codeplex.com/discussions/528893
I have an app that is based on the Panorama control. Clicking on an item on one of the Panorama control's pages (tabs) goes to a details page. On that details page I have the XAML below that renders the item content. As you can see there is a TextBlock hosted by a StackPanel in the phone:PanoramaItem.Header element. I want the text in that element to wrap the video title the TextBlock is bound to in the view model. I have TextWrapping set to wrap and I have assigned it a fixed width so the TextBlock doesn't grow/expand (and therefore won't wrap). The text does wrap, but some lines still appear clipped with some words appearing "cut off". What is wrong with my XAML?
I read about using a DockPanel instead:
TextBlock Wrapping in WPF Layout
But this app has a StackPanel used on a lot of different pages so if I can stick with a StackPanel I'd prefer it.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Visibility="{Binding IsInternetAvailable}" Background="{StaticResource PhoneAccentBrush}" Height="30">
<TextBlock Text="{Binding Path=LocalizedResources.NoConnection, Source={StaticResource LocalizedStrings}}" Margin="10, 0"/>
</Grid>
<phone:Panorama x:Name="PanoramaFavorites_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaFavorites_DetailVideos_SelectionChanged">
<phone:Panorama.Title>
<StackPanel Orientation="Horizontal" Margin="0,15,0,0">
<Image Height="85" Width="85" Source="http://appstudiodata.blob.core.windows.net/apps/1383/db936107-bce6-41a2-9d95-1d342f66c6bb/res/Logo-b3883645-a6cd-4cc8-82be-97c87a266656.png" Stretch="Uniform" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,10,5" RenderTransformOrigin="0.5,0.5" />
<TextBlock FontSize="92" Text="Robot Videos" FontFamily="Segoe WP Light" Foreground="{StaticResource CustomTitleApplicationTextBrush}" VerticalAlignment="Stretch"/>
</StackPanel>
</phone:Panorama.Title>
<phone:PanoramaItem x:Name="PanoramaFavorites_DetailVideos0" Margin="0,0,0,25">
<phone:PanoramaItem.Header>
<StackPanel Orientation="Horizontal" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}" FontSize="36" TextWrapping="Wrap" Width="440" Height="170"/>
</StackPanel>
</phone:PanoramaItem.Header>
<ctl:FlipControl NextElementCommand="{Binding NextpanoramaFavorites_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaFavorites_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaFavorites_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaFavorites_DetailVideos0}">
<ctl:FlipControl.InnerContent>
<Grid Margin="10,5,5,5">
<ScrollViewer>
<ctl:YouTubePlayer Margin="0,10" MaxHeight="250" VerticalAlignment="Top" VideoId="{Binding CurrentYouTubeVideo.VideoId, TargetNullValue={StaticResource DefaultNoImageValue}}"/>
</ScrollViewer>
</Grid>
</ctl:FlipControl.InnerContent>
</ctl:FlipControl>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
As per your comments, this works for me:
<StackPanel Orientation="Vertical" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}"
Foreground="{StaticResource CustomApplicationTextBrush}"
FontSize="36"
TextWrapping="Wrap"
MaxWidth="440"/>
</StackPanel>
I seem to be having a problem with adding multiple StackPanels in a ScrollViewer. I can add the first one and it displays the data I want but when I try to add the second StackPanel is fails and brings the error "Duplication assignment to the 'Content' property of the 'ScrollViewer' object"
My front end code is like below:
<ScrollViewer VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible"
ZoomMode="Disabled"
Grid.Column="1"
Grid.Row="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<StackPanel Style='{StaticResource BlueFirstStackPanel}'>
<TextBlock Text='Facility Patient Number:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
<TextBlock Text='Patient Number:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
<TextBlock Text='Patient Support Number:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
<TextBlock Text='NHIF Number:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
<TextBlock Text='Patient National ID:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
</StackPanel>
</ScrollViewer>
My C# code for the code has this in it:
public sealed class ScrollViewer : ContentControl
{
}
And the above displays very well but when I add a second StackPanel it brings an error. Any help with this?
The ScrollViewer can only have one child control. Try wrapping both StackPanels in a Grid or another StackPanel:
<ScrollViewer>
<StackPanel x:Name="ScrollViewerChild">
<StackPanel x:Name="StackPanel1">
</StackPanel>
<StackPanel x:Name="StackPanel2">
</StackPanel>
</StackPanel>
</ScrollViewer>
I'm having a lot of trouble trying to get this working, and was hoping someone could help.
I have a ScrollViewer in my WindowsPhone app, and I'm trying to emulate a similar control to the "Date/Time Chooser" that you'd see in the native Calendar app. So my ScrollViewer contains a StackPanel with multiple square Canvases with rectangles and TextBlocks. My intent is to watch the "ScrollStates", and when the VisualState changes to "NotScrolling", I'd then check the VerticalOffset of the ScrollViewer and animate a slide to the nearest "snap-to" position (ie. aligning the square to the correct/middle position).
<ScrollViewer Name="sv" Width="100" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Disabled" Loaded="ScrollViewer_Loaded">
<StackPanel>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="1" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="2" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="3" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
...
</StackPanel>
</ScrollViewer>
I've been looking at various examples that hook into the VisualStates, like http://blogs.msdn.com/b/ptorr/archive/2010/07/23/how-to-detect-when-a-list-is-scrolling-or-not.aspx ; http://developingfor.net/2009/02/16/fun-with-the-wpf-scrollviewer/ ; http://blogs.msdn.com/b/slmperf/archive/2011/06/30/windows-phone-mango-change-listbox-how-to-detect-compression-end-of-scroll-states.aspx ... all seem to have similar code to this:
// Visual States are always on the first child of the control template
FrameworkElement element = VisualTreeHelper.GetChild(sv, 0) as FrameworkElement;
... which then goes on to seek out VisualStateGroup group = FindVisualState(element, "ScrollStates");, from which they can hook an Event to when it changes.
However... whenever I try doing the VisualTreeHelper.GetChild(sv,0) as FrameworkElement, the app crashes with an exception of type 'System.ArgumentOutOfRangeException'. If I output VisualTreeHelper.GetChildrenCount(sv), it is always "0". How is it seemingly working for everyone else? 8)
Any help would be greatly appreciated. Thanks!
(As an alternative, has anyone made this kind of "Select Box" already in a reusable control I could use instead of trying to reinvent it?)
Did you wait till the scrollviewer's Loaded event fires before trying to get the scrollviewer children??