I am considering my Launch Screen/Dashboard screen having tiles(Squares with a few lines of information on them). I understand that tiles are not a UI object for use inside Windows Phone apps, but I've seen some people fake them somehow.
Can anybody gimme and some tips and guidance as to how this is achieved? I am under the impression of what I have seen in my first 2 days working on Win-Mobile that you cannot stack view objects on top of each other. For example drawing a square object and then drawing 3 lines of text on top of that to make a tile.
Many Thanks,
-Code
Was it the HubTile control you saw?
Here is what I am doing for my Dashboard page in my application. It is simply a StackPanel with two TextBlocks inside. These StackPanels are then inside of a WrapPanel from the Silverlight Toolkit for Windows Phone inside of a ListBox, which you don't have to use.
<ListBox Name="lstTiles" Margin="0,0,-12,0">
<ListBoxItem>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="173" Height="173" Margin="12,12,0,0" Tap="stkSignIn_Tap">
<TextBlock Text="Tile Title" Style="{StaticResource PhoneTextTitle2Style}" Foreground="White" TextWrapping="Wrap" Margin="12,6,12,12" Height="106" />
<TextBlock Text="Your subtitle here" Style="{StaticResource PhoneTextNormalStyle}" Foreground="White" Margin="12,12,12,12" VerticalAlignment="Bottom" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="173" Height="173" Margin="12,12,0,0" Tap="stkSignIn_Tap">
<TextBlock Text="Tile Title" Style="{StaticResource PhoneTextTitle2Style}" Foreground="White" TextWrapping="Wrap" Margin="12,6,12,12" Height="106" />
<TextBlock Text="Your subtitle here" Style="{StaticResource PhoneTextNormalStyle}" Foreground="White" Margin="12,12,12,12" VerticalAlignment="Bottom" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="173" Height="173" Margin="12,12,0,0" Tap="stkSignIn_Tap">
<TextBlock Text="Tile Title" Style="{StaticResource PhoneTextTitle2Style}" Foreground="White" TextWrapping="Wrap" Margin="12,6,12,12" Height="106" />
<TextBlock Text="Your subtitle here" Style="{StaticResource PhoneTextNormalStyle}" Foreground="White" Margin="12,12,12,12" VerticalAlignment="Bottom" />
</StackPanel>
</ListBoxItem>
</ListBox>
The Telerik RADHubTile control can do this for you. Please, check out this article:
New Hub Tile Control for Your Windows Phone Apps
Note: the library cost around $99 I think.
There are many tile controls available now, but for the sake of anyone else going in search of one, you can find my pretty simple 'home grown' tile control here: http://www.crisrowlands.com/wpdev-tips-4/
Related
I would like to ceate a text block inside a scroll view. I want the scroll view to be automatic on every device and every screen size. But for the moment, I am forced to fix an height, in pixels. Otherwise, the scroll view will adapt to the text size... Without doing its scrolling job.
How to do this properly?
Thanks!
EDIT: here is my XAML:
<Grid>
<StackPanel Orientation="Vertical" Margin="10,10,10,10">
<ProgressBar x:Name="progressBar" IsIndeterminate="True" IsEnabled="True" />
<TextBlock x:Name="titleBlock" Text="" VerticalAlignment="Top" FontSize="48"/>
<TextBlock x:Name="subtitleBlock" Text="" TextWrapping="Wrap" FontSize="24" FontStyle="Italic"/>
<TextBlock x:Name="dateBlock" TextWrapping="Wrap" Text="" FontSize="24"/>
<ScrollViewer VerticalAlignment="Top" Height="370" VerticalScrollBarVisibility="Visible" Margin="0,15,0,0" VerticalScrollMode="Enabled" AllowDrop="False" BringIntoViewOnFocusChange="True" HorizontalScrollMode="Disabled" IsHoldingEnabled="True" >
<Grid>
<TextBlock x:Name="descriptionBlock" TextWrapping="Wrap" Text="" FontSize="14.667"/>
</Grid>
</ScrollViewer>
<Button x:Name="buttonViewFlyer" Click="buttonViewFlyer_Click" Content="Voir le flyer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,0"/>
<Button x:Name="buttonViewFacebookPage" Click="buttonViewFacebookPage_Click" Content="Page Facebook de l'évènement" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,0,5,5"/>
</StackPanel>
</Grid>
I want the scrollview to have a height that adapts with device screen size.
I am trying to create buttons for a 10-foot GUI using WPF. Each button requires a little more data than just a single text string and an image, maybe 2-3 strings located in different positions and some imagery.
I have tried
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch">
<TextBlock Name="textBloczk2" Text="ABC" TextAlignment="Left" DockPanel.Dock="Left"/>
<TextBlock Name="textBlxock1" Text="CDE" TextAlignment="Right" DockPanel.Dock="Right"/>
</DockPanel>
</Button.Content>
</Button>
But no matter which inner container I use, the button seems to disregard the layout from the DockPanel and the combined text ends up in the middle of the button. Am I doing something wrong or should I be using a different outer container ?
The problem seems to be that the DockPanel's width is so small that the Right and Left panels are the same width as your TextBlocks.
This seems to work as expected (setting the width of the DockPanel):
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" Width="300">
<TextBlock Name="textBloczk1" Text="Left" DockPanel.Dock="Left" />
<TextBlock Name="textBlxock2" Text="Right" DockPanel.Dock="Right" />
<TextBlock Name="textBlxock3" Text="Top" DockPanel.Dock="Top" />
<TextBlock Name="textBlxock4" Text="Bottom" DockPanel.Dock="Bottom" />
</DockPanel>
</Button.Content>
</Button>
Try to add "HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" to your button. This way dockpanel will occupy all space inside the button.
I have a little problem using the longlistselector (well more specifically the multilonglistselector) in windows phone 8.
I use binding to bind the name of an object to the items, the XAML code is as follow:
<Grid>
<TextBox x:Name="searchBox"
IsEnabled="{Binding IsConnected}"
HorizontalAlignment="Left" KeyUp="CheckKey"
Height="72" Margin="10,10,0,0" TextWrapping="Wrap" InputScope="Search" GotFocus="Select"/>
<toolkit:LongListMultiSelector EnforceIsSelectionEnabled="True" SelectionChanged="AdjustAddSelectionButton" x:Name="resultList" ItemsSource="{Binding Results}" HorizontalAlignment="Stretch" Height="434" Margin="10,87,0,0" VerticalAlignment="Top" >
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Title}" TextWrapping="Wrap">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DoubleTap="OpenArticleDetail" />
</toolkit:GestureService.GestureListener>
</TextBlock>
</Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
The Binding takes place perfectly, but the text is sometimes too long and doesn't fit the screen. How would I go about wrapping this text to another line?, I 'll give a screenshot here
You didn't really state any specific problem or question you want answered. Please try to be a bit more clear in the future.
If you don't like that the TextBlock cuts off words that it can't fit, then you have several solutions.
TextBlocks have a TextWrapping property, so doing TextWrapping="Wrap" will enable the TextBlock to resize itself to display all the content.
TextBlocks have the TextTrimming property, so writing TextTrimming="WordEllipsis" will replace any cut off words with an ellipsis.
If you want to keep the one line but also show all the content, you can put the TextBlock inside a Horizontal ScrollViewer, which will let the user scroll the text left and right. Not great, but a decent solution
Code for 3.
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible">
<TextBlock Text="Text"/>
</ScrollViewer>
I added a huge right padding to my main TextBlock to work around this issue.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="MyTemplate">
<StackPanel VerticalAlignment="Top" Margin="0,-4,-50,0">
<TextBlock FontWeight="Bold" FontSize="18" Text="{Binding title}" TextWrapping="Wrap" Margin="0,0,0,6"/>
<TextBlock Text="{Binding text}" TextWrapping="Wrap" FontSize="30" Padding="0,0,125,0"/>
<Rectangle HorizontalAlignment="Stretch" Height="1" Fill="#78c5a6" Margin="0,18,0,18"/>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
I have some Canvases in a ListBox. Inside these Canvases I have some TextBlocks which have their text bound to them. However when I try to use a MaxWidth/Height property on the text block (or the standard Height/Width), the properties are ignored! So I end up with the text overspilling the Canvas in cases.
I would much appreciate any help on the matter, and I hope I'm not just being a blind idiot!
Oh, and here's the code (the TextBlock I'm talking about is the first one):
<ListBox Margin="0,-9,-12,0" ItemsSource="{Binding}" Name="listBoxNotes" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="548">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Canvas Height="175" Width="360" Background="{StaticResource PhoneAccentBrush}" toolkit:TiltEffect.IsTiltEnabled="True" Name="canvasNote" Tap="canvasNote_Tap">
<TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="26" Foreground="White" Canvas.Left="10" Canvas.Top="5" x:Name="Title" Width="100" MaxWidth="100"/>
<TextBlock Text="{Binding Details}" TextWrapping="Wrap" Width="352" FontSize="24" Foreground="White" Canvas.Left="10" Canvas.Top="35" />
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem with this is Canvas does not limit the size of their children, and especially theTextBlock control will grow as much as it needs.
Many ways to solve your problem :
Do not use TextBlock but a TextBox
Do not use Canvas but another container such as Border, Grid, StackPanel...
Try to clip the TextBlock content
<TextBlock.Clip>
<RectangleGeometry Rect="0, 0, 50, 30"/>
</TextBlock.Clip>
I must be missing something simple here...I am writing a Windows Phone 7 app and I have customized my pivot header to be the following:
<controls:Pivot Name="InfoPivot">
<controls:Pivot.TitleTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" VerticalAlignment="Top">
<Rectangle Fill="{Binding CategoryFill}" Height="50" Width="50" Margin="355,25,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="CategoryRect" />
<StackPanel Margin="-425,-14,0,0" Width="432">
<TextBlock x:Name="StationTitle" Text="{Binding StationTitle}" Margin="10,0,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<TextBlock Name="LocationTitle" Text="{Binding LocationTitle}" TextWrapping="Wrap" Margin="12,0,0,20" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</controls:Pivot.TitleTemplate>
When I navigate to this page, I pass Station and Location as parameters, and in the OnNavigatedTo() for this page I try to set the StationTitle and LocationTitle. Unfortunately, I end up getting:
Error 2 The name 'StationTitle' does not exist in the current context
How should/do we go about accessing members in the Pivot TitleTemplate? Any help will be appreciated! Thanks.
Stop using the title template and binding to acheive this. Try this instead:-
<controls:Pivot Name="InfoPivot">
<controls:Pivot.Title>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" VerticalAlignment="Top">
<Rectangle Fill="{Binding CategoryFill}" Height="50" Width="50" Margin="355,25,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="CategoryRect" />
<StackPanel Margin="-425,-14,0,0" Width="432">
<TextBlock x:Name="StationTitle" Margin="10,0,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<TextBlock x:Name="LocationTitle" TextWrapping="Wrap" Margin="12,0,0,20" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</StackPanel>
</controls:Pivot.Title>
Then in code-behind:-
if (NavigationContext.QueryString.TryGetValue("Station", out station))
{
StationTitle.Text = station;
}
if (NavigationContext.QueryString.TryGetValue("LocationTitle", out locationTitle))
{
LocationTitle.Text = locationTitle;
}
Without seeing all of your code, this may be as simple as making the Name declaration consistent on your two TextBlocks.
Note, one is Name="", the other is x:Name="".
Defining the template inline worked for me, The TitleTemplate just wouldn't work.
<phone:Pivot>
<phone:Pivot.Title>
<TextBlock Margin="0"
Text="{Binding Exercise.Name}"
Style="{StaticResource MainTitleStyle}"/>
</phone:Pivot.Title>
</phone:Pivot>