Windows Phone - News block - xaml

I'm trying to make a block that contain news that i'd like to implement in a scroll viewer.
The block should look like this :
Picture in the top-right resolution (with a resolution : 50*50 );
Text wrapped along with the picture ;
<ScrollViewer Grid.Row="1" x:Name="ContentRoot" Margin="20,0,20,0">
<StackPanel>
<Button Width="Auto" Height="150">
/*Text and picture here like described before*/
</Button>
<Button Width="Auto" Height="150">
/*Text and picture here like described before*/
</Button>
</StackPanel>
</ScrollViewer>
PS : I'd like to design it only , not trying to make a functional app.

You can just use Grid with ColumnDefinitions inside your Button, for example:
<Button Width="Auto"
Height="50"
HorizontalContentAlignment="Stretch">
<Grid Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="Sample text - lorem ipsum dolor sit amet"
TextWrapping="Wrap"
TextAlignment="Left"
VerticalAlignment="Top"
Margin="12"/>
<Image Grid.Column="1"
Source="SampleImageSourceHere"
HorizontalAlignment="Right"
Width="50" />
</Grid>
</Button>
Note: It's only sample, I didn't test it but you can try to adjust your view. Hope it helps.
Futhermore I recommend to use a ListView if you'll add a big amount of items (Buttons) into your list. ListView supports virtualizaton and avoids memory problems.
If you have source collection of items, you can just create ListView with item template and set ItemsSource. I found thread about it here: Windows Phone ListView Binding

Related

UWP: how to hide a RelativePanel after 2 seconds

I have developed an UWP app allowing users to edit forms.
I would like to use a RelativePanel to show messages to the users on the Home page.
Theses message can concern forms management ("The form XXX has well been deleted", "The form XXX has well been saved"), or the synchronization ("Sync ended successfully", "Impossible to sync datas").
The Home page is based on a Grid that contains 3 rows:
a filter searchbox
the list of the forms
sync informations
Here is a screenshot of this page:
I would like to display the RelativePanel in the 3rd Row, above the sync informations, but only during 2 seconds. Then the RelativePanel will disappear, and the sync informations must be visible again.
I also encounter a problem with the width of the RelativePanel: I would like a left/right padding of 150, but it doesn't seem to work:
My XAML code looks like this:
<!-- User + Last sync-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding CurrentUser.username}" />
<StackPanel Grid.Column="1"
Orientation="Horizontal"
HorizontalAlignment="Right">
<TextBlock x:Uid="HomeTextBlockLastSync" Margin="0,0,8,0"/>
<TextBlock Text="{Binding LastSync, Mode=TwoWay}" />
</StackPanel>
</Grid>
<!-- Form Status message -->
<RelativePanel Grid.Row="2"
Background="Cyan"
Padding="150,0,150,0">
<StackPanel x:Name="FormStatusPanel" Orientation="Vertical"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True">
<Border x:Name="FormStatusBorder" Margin="0">
<ScrollViewer VerticalScrollMode="Auto"
VerticalScrollBarVisibility="Auto"
MaxHeight="150">
<TextBlock Text="TestTestTest"
x:Name="FormStatusBlock" FontWeight="Bold"
TextWrapping="Wrap" />
</ScrollViewer>
</Border>
</StackPanel>
</RelativePanel>
=> Would you have an idea on why the Padding doesn't work? What is a better way to hide RelativePanel after 2 seconds? With the VisualStateManager or by the code?

Disable opacity on Textblock when grid's opacity is set for WP8

I've posted a similar question in the past but never quite resolved it and so here I am again.
In my layout grid, I have an image which takes the full area but I also display another grid which is vertically aligned to the bottom, has its background color set and its opacity set to .5.
This part works fine.
Now, I want to display another grid within that grid which will contain another image (a logo) and a TextBlock which contains a description.
My problem is that both the image and textblock are being dimmed. While I have no problem with the logo being dimmed, I do want to keep my description fully opaque but can't seem to be able to do this.
Is there a way to achieve this? Note I'm trying to build a custom tile for WP8.
Here is the code:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Stretch="UniformToFill" Source="/Assets/0.jpeg" ></Image>
<Grid Background="#0F558E" Opacity="0.5" Visibility="Visible" Height="100" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="/Assets/Tiles/FlipCycleTileSmall.png" Width="100" Height="100" Grid.Column="0" Opacity="1" ></Image>
<TextBlock Foreground="White" FontSize="30" Text="This is a simple description of the article" TextWrapping="Wrap" Margin="10,0,30,0" Grid.Column="1" Opacity="1" />
</Grid>
</Grid>
Thanks.
As you found out, everything that is a child of that grid is going to have a 0.5 opacity, and any opacity settings on the children are going to be relative to that.
Could you just overlay a third grid on top of the second that has the same sizing and contains your image and text? I don't have anything in front of me to test this at the moment, but something like:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Stretch="UniformToFill" Source="/Assets/0.jpeg" ></Image>
<Grid Background="#0F558E" Opacity="0.5" Visibility="Visible" Height="100" VerticalAlignment="Bottom">
</Grid>
<Grid Visibility="Visible" Height="100" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="/Assets/Tiles/FlipCycleTileSmall.png" Width="100" Height="100" Grid.Column="0" Opacity="1" ></Image>
<TextBlock Foreground="White" FontSize="30" Text="This is a simple description of the article" TextWrapping="Wrap" Margin="10,0,30,0" Grid.Column="1" Opacity="1" />
</Grid>
</Grid>

Windows 8 Ad sdk hides Charm bar window (About us)

In my windows 8 application i have a advertisement in right side of window. When i choose the about page from my charm bar settings pane, the ad sdk control remain in top of the about page.. looks like below...
MainPage.xaml,
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ads:AdControl Width="160" Height="600" IsEnabled="False" HorizontalAlignment="Right" AdUnitId="10043134" ApplicationId="d25517cb-12d4-4699-8bdc-52040c712cab"></ads:AdControl>
</Grid>
About.xaml(User Control),
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="#000000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="butAboutus" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource SnappedBackButtonStyle}" />
<TextBlock x:Name="pageTitle" Grid.Column="1" Foreground="White" Text="About" Style="{StaticResource PageHeaderTextStyle}" FontSize="30" Margin="0,0,27,39"/>
</Grid>
<Grid Grid.Row="1" Background="White">
<StackPanel Orientation="Vertical" Margin="20,20,0,0">
<TextBlock Text="Sample about" FontSize="15" Foreground="Black" TextWrapping="Wrap" Margin="0,0,0,15"/>
</StackPanel>
</Grid>
</Grid>
what am i doing wrong? how can i solve this problem...?
Thanks in advance.
You will have to hide the ad control when you want to display something on top of it. The ad control uses the WebBrowser, which has the (annoying) property of always being on top.
As Wilbur suggested the adcontrol currently uses webview (browser control) and would always appear on top, therefore you'd need to toggle it's visiblity before showing the flyout or popup control. The other nuisance of this control is that it will also take away the focus from the app whenever the ads are refreshed (you might want to set IsEnabled property to false to fix that).
Personally in my view webview and adcontrol are the two controls that needs to be re-written :(

How do I prevent a column in Silverlight xaml Grid from taking up the entire row?

I want to display two columns in my Grid. The first is a textblock that is sometimes longer than the row meant to hold it. The second is a button. Is there a way to give the textblock as much room as possible while still leaving room for the button to go immediately after?
When I use the following code, the textblock will sometimes push the button outside the viewable area of the grid.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Description}" HorizontalAlignment="Stretch" />
<Button Margin="4,0" Height="0" Width="16" Grid.Column="1" MinWidth="20" VerticalAlignment="Center" />
</Grid>
I've tried setting the first column definition Width="*", but then the button is always at the very end of the row, when I want it next to the text. Any suggestions?
This is in Silverlight 4.
Thanks.
EDIT
I want the grid to resize as the user changes the window size, so setting a hard limit on the grid size is no good. That being said, I was able to manually set the MaxWidth in the code behind when the TextBlock loads and when the window changes size. It's clunky, but it works.
Following will surely work..
<Grid x:Name="LayoutRoot" Background="White" Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock" Grid.Column="0" Text="Text Box" VerticalAlignment="Top"/>
<Button x:Name="button" Grid.Column="1" Content="Button" VerticalAlignment="Top" Width="60"/>
</Grid>
Add Following Line to xaml.cs file in constructor..
public MainPage()
{
InitializeComponent();
textBlock.MaxWidth = LayoutRoot.Width - button.Width;
}
Let me know if there is any issue with it.
Thanks..

How to get a TextBlock to right-align?

How do I get the TextBlock in my status bar below to align to the right?
I've told it to:
HorizontalAlignment="Right"
TextAlignment="Right"
but the text is still sitting unobediently on the left. What else do I have to say?
<Window x:Class="TestEvents124.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300"
MaxWidth="700" Width="700"
>
<DockPanel HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="Auto">
<StatusBar Width="Auto" Height="25" Background="#888" DockPanel.Dock="Bottom" HorizontalAlignment="Stretch">
<TextBlock
Width="Auto"
Height="Auto"
Foreground="#fff"
Text="This is the footer."
HorizontalAlignment="Right"
TextAlignment="Right"
/>
</StatusBar>
<GroupBox DockPanel.Dock="Top" Height="Auto" Header="Main Content">
<WrapPanel Width="Auto" Height="Auto">
<TextBlock Width="Auto" Height="Auto" TextWrapping="Wrap" Padding="10">
This is an example of the content, it will be swapped out here.
</TextBlock>
</WrapPanel>
</GroupBox>
</DockPanel>
</Window>
I've had a play with your code and managed to make it look "right" (no pun intended) by using a StatusBarItem rather than a TextBlock:
<StatusBar Width="Auto" Height="25"
Background="#888" DockPanel.Dock="Bottom"
HorizontalAlignment="Stretch" >
<StatusBarItem Foreground="#fff"
HorizontalContentAlignment="Right">This is the footer</StatusBarItem>
</StatusBar>
Not sure what's happening with the TextBlock - all my experience says that some combination of HorizontalContentAlignment and HorizontalAlignment (on both the StatusBar and the TextBlock) should achieve what you want. Anyway - hopefully the StatusBarItem will work for you.
<StatusBar>
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem Grid.Column="0">
<TextBlock>something</TextBlock>
</StatusBarItem>
<Separator Grid.Column="1" />
<StatusBarItem Grid.Column="2">
<TextBlock>logged in</TextBlock>
</StatusBarItem>
</StatusBar>
This example won't mess up your Separator. Based on an example taken from http://kent-boogaart.com/blog/the-perfect-wpf-statusbar
You shouldn't put a Separator in a StatusBarItem, it will reduce your separator to a dot.
For anyone who is looking for the answer to the question in the title (not necessarily for use in a status bar), I found a Label to be better than a TextBlock for having control over alignment and still feeling semantically correct.
Seems this is still an issue. The problem is that a TextBlock's width is automatically set based on its content. To verify this just set the Background property to another color. Setting the HorizontalAlignment to Stretch doesn't help.
Fortunately, most of my properties are set in code (MVPVM) and my TextBlocks are contained in a Panel and I was able to set the TextBlock's width property to its Parent width. i.e tb.Width = tb.Parent.Width, then Right alignment worked.