Below is my design containing media element, play, pause, full window and seeker.
<MediaElement x:Name="VideosMediaElement" VerticalAlignment="Top"
Height="250" Width="355" Margin="0,20,0,0"
BufferingProgressChanged="VideosMediaElement_BufferingProgressChanged"
RealTimePlayback="True"
/>
<Grid x:Name="mediaGrid">
<Border VerticalAlignment="Bottom" Height="60" Background="Black"
Opacity="0.1">
</Border>
<Image x:Name="PlayIcon" Source="Assets/Play-icon.png"
Height="35" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Margin="3,0,0,10" Visibility="Collapsed" Tapped="PlayIcon_Tapped">
</Image>
<Image x:Name="PauseIcon" Source="Assets/Pause.png"
Height="35" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Margin="3,0,0,10" Tapped="PauseIcon_Tapped" Visibility="Visible">
</Image>
<TextBlock x:Name="duration" Foreground="White" VerticalAlignment="Bottom"
Margin="43,0,0,20">
</TextBlock>
<ProgressBar x:Name="videoProgressBar" VerticalAlignment="Bottom"
Margin="15 0 10 25" Foreground="DarkBlue" Background="Gray"
Width="180" Height="10" Minimum="0"
Maximum="{Binding Path=NaturalDuration.TimeSpan.TotalSeconds,
Mode=TwoWay,
ElementName=VideosMediaElement}"
Value="{Binding Path=Position.TotalSeconds, Mode=TwoWay,
ElementName=VideosMediaElement}"
Tapped="videoProgressBar_Tapped"
/>
<TextBlock x:Name="maximumDuration" Foreground="White" Margin="0,0,40,20"
VerticalAlignment="Bottom" HorizontalAlignment="Right">
</TextBlock>
<Image x:Name="ExpandEnabled" Source="Assets/Fullscreen.png"
Tapped="Zoom_Tapped" Height="35" Margin="0 0 3 10"
HorizontalAlignment="Right" VerticalAlignment="Bottom">
</Image>
</Grid>
If I click the full window icon on the right hand side, the video shows as full window with play, pause, seeker and full window button.
VideosMediaElement.IsFullWindow = true;
<MediaElement x:Name="VideosMediaElement" VerticalAlignment="Top"
Height="300" Width="360"
BufferingProgressChanged="VideosMediaElement_BufferingProgressChanged"
AreTransportControlsEnabled="True">
<MediaElement.TransportControls>
<MediaTransportControls IsCompact="True" IsZoomButtonVisible="False"
IsZoomEnabled="False"
IsPlaybackRateButtonVisible="True"
IsPlaybackRateEnabled="True"
/>
</MediaElement.TransportControls>
</MediaElement>
The video plays in full window, but play, pause and seeker are hiding when I set the IsWindowFull property. How to show those controls when the media element is in full window?
You can check the Live Visual Tree to check your Layout in the run-time:
When a MediaElement enters into the FullScreen mode, FullWindowMediaRoot will host the MeidiaElement and your mediaGrid will not be shown in this time. One method is as #Chris W. said use the TransportControls of MediaElement, but this is not available in Windows 8.1 app, as you developed a windows phone 8.1 app, there is no such problem.
Since custom transport control is not supported in WP8.1, for windows phone 8.1 app, you can manually set the Width and Height of MediaElement to App's size for example like this:
VideosMediaElement.Width = Window.Current.Bounds.Width;
VideosMediaElement.Height = Window.Current.Bounds.Height;
Since the app runs on WP8.1 as full screen mode, this method will also make the MediaElement looks like it is in full screen mode. And when you want to "exit from full screen mode", you can just reset the Height and Width properties.
Related
I am trying to make a smooth transition from a closed panel to an open panel and vice versa.
But I don't know how to do it ((
I have an element
<SplitView Style="{StaticResource SplitViewEditMusicTraskStyle}"
CompactPaneLength="0"
PaneBackground="Transparent"
DisplayMode="CompactInline"
IsPaneOpen="{Binding EditPanelIsOpen, Mode=TwoWay}"
OpenPaneLength="308"
Background="Transparent"
PanePlacement="Right">
I could not attach the standard element template because stackoverflov has a limit on the number of characters per stack
How to make a smooth transition from one state to another SplitView UWP
During the testing, if set PanePlacement right, for making SplitView panel open smoothly, please set DisplyMode as Overlay or CompactOverlay.
<SplitView x:Name="splitView" PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
IsPaneOpen="False" OpenPaneLength="328" CompactPaneLength="56" DisplayMode="CompactOverlay">
For your requirement, you could also make pop control and set ChildTransitions as PaneThemeTransition to archive smooth transition from a closed panel to an open panel. For more please refer following code.
Xaml code
<Popup
x:Name="RightMeun"
Width="200"
Height="{Binding ElementName=RootGrid, Path=ActualHeight}"
HorizontalAlignment="Right"
IsOpen="False">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Right" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid
Width="200"
Height="{Binding ElementName=RightMeun, Path=Height}"
Background="LightBlue">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Hello" />
</Grid>
</Popup>
I'm struggling to get something similiar to what I painted in Photoshop (took over 9000 hours).
Basically our Windows app for tablets needs a control that shows an onscreen grid when clicked. The data genesis and grid preparation occurs in codebehind of the control and I don't know how to draw the grid outside of my control. Even simple popup control would be fine if I could get it outside the parent boundaries.
You could use a flyout:
<Button Width="100" Height="100" Background="Black">
<Button.Flyout>
<Flyout Placement="Bottom">
<Grid Width="200" Height="200">
<StackPanel>
<Rectangle Fill="Red" Width="100" Height="100" />
<Rectangle Fill="Green" Width="100" Height="100" />
</StackPanel>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
also you can prepare your own popup:
How to center a popup in window (Windows store apps)
In my Windows Phone 8 application,there are nearly 45 pages. I want to display an alert message(customized) in all pages of my application. Is it possible to design it in a single page and call it in other pages?
Xaml design for alert message:
<Canvas x:Name="ExpiryPopUp_Container" Visibility="Collapsed" Margin="0,0,0,0" Background="Transparent" Width="800" Height="768">
<Canvas x:Name="ExpiryPopUp" Background="#FFFFFFFF" Height="180" Canvas.Left="410" Canvas.Top="320" Grid.Row="1" Width="300">
<Canvas Background="{StaticResource LeftNavBackground}" Height="48" Width="300">
<TextBlock FontSize="26" TextAlignment="Center" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Text="Alert" Width="300" Canvas.Top="10" Height="28"/>
</Canvas>
<TextBlock Text=" Session has expired." FontSize="22" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" TextAlignment="Center" Foreground="{StaticResource BlueText}" Canvas.Top="71" Width="300"/>
<Canvas x:Name="OkButton" Background="{StaticResource buttonBackground}" Height="32" Width="56" Canvas.Left="122" Canvas.Top="120" Tap="OkButton_Tap">
<TextBlock TextAlignment="Center" Text="Ok" FontSize="24" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Width="49" Height="26" Canvas.Top="2" Canvas.Left="3"/>
</Canvas>
</Canvas>
</Canvas>
Per above comments, you want to navigate. To do that from anywhere in your app, you can do:
(App.Current as App).RootFrame.Navigate(...)
I would caution against using a Canvas (anywhere!) becuase if you ever move to being a Universal App (Windows and Windows Phone 8.1) all your layout will be wrong on larger-screen devices. Or even if you decide to support landscape orientation, for that matter.
Un-parented popups won't rotate with the rest of the app; they will always be in Portrait mode. The code pointed to by that blog also shows a mechanism to host common UI inside the root frame so you don't need to use a popup (look at App.Xaml and the ApplyCustomFrameTemplate method in the .cs file).
I have a listbox with objects but I cannot scroll to the bottom of the page. What is the problem? This is the code that I'm using.
<Grid>
<Image Name="Nietcomment" Source="write.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup" Visibility="Visible"/>
<Image Name="welcomment" Source="write2.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup_remove" Visibility="Collapsed"/>
<ScrollViewer Name="scrollview" VerticalScrollBarVisibility="Visible" Margin="0,0,0,0" Foreground="Black">
<StackPanel>
<TextBlock x:Name="NTitelComment" Text="{Binding}" TextWrapping="Wrap" FontSize="25" Margin="10,0,10,0" Foreground="#FFE5001b"/>
<Line Stretch="Fill" Stroke="Black" X1="0" X2="1" Y1="0" Y2="0" Margin="10,0,10,0"/>
<TextBlock x:Name="tijdComment" Text="{Binding}" Margin="50,0,10,0" Foreground="Black"/>
<Image Height="20" Width="20" Margin="-380,-20,0,0" Source="/PostDateIcon.png"/>
<ListBox Margin="0,0,0,20" Name="lbComments" VerticalAlignment="Top" />
</StackPanel>
</ScrollViewer>
</Grid>
If you put a border around your ScrollViewer, can you see if it goes outside of the screen maybe? Will it help to set a fixed height of the Grid or ScrollViewer?
Keep in mind the phone has built in scroll, so your ScrollViewer maybe doesn't play well with it.
With so much fixed margins, your layout will be impossible to manage, especially when dealing with differents screen resolutions and especially with negative margins.
Anyway, right now, you have two scrollviewers, as your listbox contains one as well.
You should disable the listbox scrollviewer or it will prevent your page to scroll.
Just change your listbox:
<ListBox
Margin="0,0,0,20"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Name="lbComments"
VerticalAlignment="Top" />
It will disable it's scrollviewer and allow it to scroll with the rest of the page.
I have the following setup
<grid>
<StackPanel>
<ListBox>
<TextBlock> ->Text you see getting cutt off<-
I have tried both just doing listbox.Add(String) and dynamically creating a TextBlock, assigning it text and then adding it to the listbox. Both produce identical results.
The image shows the listbox scrolled down half wayish. It appears the listbox has the correct height but the text inside hits some kind of limit.
UPDATE I changed the listbox to a scroll viewer and also hardcoded the Textblock in. Still same exact results
<Grid x:Name="theGrid" Grid.Row="1" Margin="12,0,10,0">
<StackPanel x:Name="TitlePanel" Grid.Row="0">
<TextBlock Text="Networking Tools" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<StackPanel x:Name="stack">
<TextBlock x:Name="inputIndicator" Margin="12,0,0,0">
<Run Text="Enter IP OR Domain"/>
</TextBlock>
<telerikPrimitives:RadTextBox x:Name="input" Text="google.com" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Grid.Row="1" Height="84" Width="458"/>
<telerikInput:RadListPicker SelectionChanged="picker_SelectionChanged" x:Name="picker" HorizontalAlignment="Left" VerticalAlignment="Top" Width="436"/>
<Button Click="Button_Click" Content="Go" HorizontalAlignment="Left" VerticalAlignment="Top" Width="456"/>
<ScrollViewer HorizontalAlignment="Left" Height="392" Width="Auto" x:Name="list" VerticalAlignment="Top">
<TextBlock Name="content" Height="Auto" Width="Auto"/>
</ScrollViewer>
</StackPanel>
<UI:AdControl ApplicationId="test_client" AdUnitId="Image480_80" Height="80" Width="480"/>
</StackPanel>
<telerikPrimitives:RadBusyIndicator Margin="0,0,0,0" Height="106" Width="116" AnimationStyle="AnimationStyle1" x:Name="busyIndi" />
</Grid>
UI elements in Windows Phone 7 have a maximum renderable height and width of 2048 pixels. Any content that is larger than that gets clipped. The limit is only slightly higher for Windows Phone 8.
You did not mention how much text you are trying to show, but if it is very long, you could be hitting that limit.
There are a few ways you could handle this:
1) Break the text into smaller chunks and add individual TextBlocks to your StackPanel for each chunk.
2) Create a custom control that does the above for you, like this one: http://blogs.msdn.com/b/priozersk/archive/2010/09/08/creating-scrollable-textblock-for-wp7.aspx
3) Use a WebBrowser control instead of a TextBlock, and use its NavigateToString method to put your text in there.