I want to disable flip animation in HubTile control for windows phone 8 application so that it should show Image with Text only as it shows in tiles in homescreen of any Windows Phone 8.
Disabling flip can be done by setting property IsFrozen = False; and I can see image which is occupying all the space over the HubTile. How can I put text below the image and Image must not be auto-stretchable and must not occupy all the space over the Hubtile? Basically, I want to imitate the same look as it is there for default windows phone tiles. Please help.
for doing that you are needed to overlap the TextBlock Control on HubTile.
Try This:
<Grid Height="200" Width="200">
<Grid.RowDefinitions>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<toolkit:HubTile Source="/Assets/ApplicationIcon.png" IsFrozen="True" Grid.RowSpan="2" Height="200" Width="200"></toolkit:HubTile>
<TextBlock Text="Sample" Grid.Row="1" VerticalAlignment="Top" Margin="20,0,0,0"></TextBlock>
</Grid>
Related
I want to show a listview and an image on a uwp page.Items to listview are adding dynamically. When loading page user can see the full listview. and if he clicks any of it's row the list view will filter based on that clicked row.Then user can see filtered listview and an image below the listview. If the user clicks on image it will again show the full listview without image. Now my issue is I want to display listview with scroll view(scrolling should work when listview height reaches end of screen). and if the user clicks on any row of listview,the height of image should fill from end of filtered listview to bottom of screen.
I have done like below.
<Grid HorizontalAlignment="Stretch" >
<Grid.RowDefinitions >
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView x:Name="ItemListView" Margin="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="Auto" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid >
//binding items here
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Border Background="Green" Grid.Row="1" x:Name="Bg" Tapped="Bg_TappedAsync" Visibility="Collapsed">
<TextBlock x:Uid="txt_string1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="DetectFromContent" FontSize="15" MaxLines="4" FontFamily="Calibri" FontStyle="Italic"/>
</Border>
</Grid>
When I did like above both list view and image(in code it is a Border) takes half half portion of screen.So when showing filtered listview (it may have only one row) a gap is occurring between listview and image. I want to fill the image with remaining height of screen. How can I achieve it? I don't want to set MaxHeight of listview. Because it should run on various size of devices
When you create two rows with a * for RowDefinition.Height, you will get two equally sized Grid rows, which is the behavior you are seeing. A star gives the row all space that is left after evaluating all rows with Auto and hardcoded pixel height. When there are multiple rows with a star, they will divide the remaining space equally. You can also use values like 2* to say that the row should have twice the height of a * row, so you can create "fractions" like 2:1.
In your case however, you might want to rather use Auto for the second row's Height. Auto will give the row the size it actually needs, so when the image is not displayed, it will effectively have zero height. When the image is displayed, it will be as high as the image and the list will take up the rest of the Grid height thanks to the *.
I'd like to add text on WindowsPhone 8.1 MediaElement fullscreen mode, but I cannot get it visible.
Here is my code:
<Grid>
<MediaElement Name="MyMedia" IsFullWindow="True" MarkerReached="MyMedia_MarkerReached"/>
<TextBlock x:Name="MediaTitles" Text="Hello World" HorizontalAlignment="Left" Margin="55,240,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="99" Width="270" FontSize="48" />
</Grid>
Any ideas what I'm doing wrong?
The property IsFullWindow="True" is causing the problem. As you might know by now. If I want the media element full screen I usually add it to the grid and span across 1 for column and row. Something like below:
<MediaElement
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="1"
Grid.ColumnSpan="1" />
This gives the same effect as full screen on the device. And you can see your Hello world text in the Designer.
I'm trying to write a page for WP8 which plays video, using the MediaElement API.
I am having difficulties in placing the play/pause controls over the video.
I am currently using a grid to house the controls over the video. The problem is that I cannot make the grid transparent. This is the XAML -
<StackPanel Background="Transparent">
<MediaElement Name="media" Source="http://video-js.zencoder.com/oceans-clip.mp4" AutoPlay="True"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<!-- Play button. -->
<!-- Pause button. -->
<Grid Background="Transparent" VerticalAlignment="Bottom" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="85" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Source="Assets\transport.pause.png" Height="79" Width="79"/>
<Image Grid.Column="1" Source="Assets\transport.play.png" Height="79" Width="79"/>
</Grid>
</StackPanel>
I can still see a black portion where the Grid is.
Is there a better way to accomplish this?
You've put the controls in a StackPanel. That means that you'll end up with:
StackPanel
MediaElement
Grid
Button/Image
Button/Image
A StackPanel is designed to stack controls either horizontally or vertically. It is not for overlaying controls. So, the black background you're seeing is the background beneath the Grid, which is likely the default background brush/color of the application (black).
If you instead were to use a Grid to host the controls, you can use an overlay as you need to:
<Grid x:Name="ContentPanel" >
<Grid>
<MediaElement Name="media" Source="Assets/sample_mpeg4.mp4"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid Background="#80000000" VerticalAlignment="Center" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" >Pause</Button>
<Button Grid.Column="1" Click="Button_Click_1" >Play</Button>
</Grid>
</Grid>
</Grid>
It's now:
Grid
MediaElement
Grid
Button
Button
It would look something like this:
Using the Grid, I've put both the MediaElement and the inner Grid in the same cell (by using the default attached property values for Row and Column which are `0').
In the above code, I've used a Grid to layout the MediaElement and another Grid which will layout the two Buttons I've used. In this case, I've centered the Grid with the Buttons so that the buttons appear in the center of the MediaElement.
I've also used a somewhat transparent Background for the Grid which contains the buttons.
I've dealt with this issue before but can't remember exactly how I solved it. I remember researching this, which is using visual media as a Brush to then paint the background of the Grid that houses the buttons. IIRC, the issue is not necessarily with the Grid, it's with anything overlaying the MediaElement. Because of some special drawing procedure involved with the MediaElement it doesn't handle overlays and transparencies well. There is a solution, but like I said I can't completely remember. But try out using the video as a Brush for the background of the Grid.
In my app I'd like to have a page layout as shown on this picture:
It has two content blocks (depicted as plain and shaded rectangles) and two states. In normal (1st) state plain block takes all the screen and is fully visible while shaded is hidden behind screen. In 2nd state shaded block is fully visible and also a small part of plain block is on screen, the rest of it is hidden.
I'd also like to have a nice transition from one state to another. I understand I'd probably need to use ViewStates for this. What I don't understand it what XAML control should I use to represent content blocks. So this is the question: what XAML controls would allow me to express this layout as elegantly and concisely as possible?
How about a grid with 2 rows. A pivot control with your 2 states in each pivot item in first row and your fixed content in second row.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Red">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<phone:Pivot Margin="0,-24,0,0">
<phone:PivotItem Background="Blue">
<StackPanel>
<TextBlock Text="Transition content 1" />
</StackPanel>
</phone:PivotItem>
<phone:PivotItem Background="Brown">
<StackPanel>
<TextBlock Text="Transition content 2" />
</StackPanel>
</phone:PivotItem>
</phone:Pivot>
<StackPanel Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Fixed content" />
</StackPanel>
</Grid>
Swiping on the top box will animate as the standard pivot animation.
If you don't want the user to be able to flick and rather control the two states programmatically then you can simply add IsHitTestVisible="False" on the root pivot control then set the SelectedIndex on the pivot to switch between states.
I am having hard times figuring this out. Here is what I need:
<StackPanel x:Name="container" VerticalAlignment="Stretch">
<RichTextBox Height="???" />
</StackPanel>
Basically what I know I can do is to bind RichTextBox Height to it's parent's height ( Height="{Binding ElementName=container, Path=ActualHeight}". Unfortunately this only works on load, because as it seems ActualHeight and ActualWidth don't notify for changes.
So what is the best way in Silverlight 4 to tell RichTextBox or TextBlock, it doesn't matter, to fill it's parent height, and maintain scrollbar if it's content height is bigger. Is the only way to bind some Resize events and maintain the height explicitly? That seems really ugly to me? Have anybody had this problem as well?
Any resources or information is highly appreciated! Thanks.
Ivan,
The best way to solve this is to use a Grid as the parent for the RickTextBox, instead of a StackPanel. By default, a Grid will "Strectch" its content to take up all of the available space. A StackPanel will only Stretch its content in one diminsion.
As an example, paste the following XAML into my XamlViewer to see the difference:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<RichTextBox
Foreground="Blue" FontSize="24" Background="Yellow">
<Paragraph>RichTextBox inside a StackPanel</Paragraph>
</RichTextBox>
</StackPanel>
<Grid Grid.Row="1">
<RichTextBox
Foreground="Blue" FontSize="24" Background="Tan">
<Paragraph>RichTextBox inside a Grid</Paragraph>
</RichTextBox>
</Grid>
</Grid>
</UserControl>
Good luck,
Jim McCurdy, Face to Face Software and YinYangMoney