Curve TextBlock in Windows 8 - c#

I want to create Curved TextBlock using XAML like:
I am doing it like this :
<TextBlock TextWrapping="Wrap" Text="TextBlock" FontSize="30" Height="46"
Width="182" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left"
VerticalAlignment="Top" Canvas.ZIndex="-1" Foreground="White"
Margin="486,125,0,0" UseLayoutRounding="False" d:LayoutRounding="Auto">
<TextBlock.Projection>
<PlaneProjection RotationZ="360" />
</TextBlock.Projection>
<TextBlock.RenderTransform>
<CompositeTransform Rotation="-30"/>
</TextBlock.RenderTransform>
</TextBlock>
But no success.
Can you tell me a better way?

Try to work on converting this to Windows 8:
http://www.codeproject.com/Articles/30090/Text-On-A-Path-in-WPF

Related

Expand the control

I've got a custom set of controls:
<Border Height="55" Margin="5,14,5,0" VerticalAlignment="Top" BorderThickness="1" BorderBrush="Black">
<Grid>
<TextBlock x:Name="SubjectNo" Text="1" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="36" Margin="0,1,36,0" d:LayoutOverrides="HorizontalAlignment" />
<TextBlock x:Name="Subject" Text="Subject NAME more " TextWrapping="Wrap" FontSize="24" FontWeight="Bold" Margin="26,0,90,19" d:LayoutOverrides="Height, TopPosition, BottomPosition" />
<TextBlock x:Name="Teacher" Text="BIG NAME HERE" TextWrapping="Wrap" FontSize="14.667" VerticalAlignment="Bottom" Margin="26,0,0,9" HorizontalAlignment="Left" Width="106" Height="17" d:LayoutOverrides="VerticalAlignment" />
<Grid Height="15" VerticalAlignment="Bottom" Margin="133,0,0,10" d:LayoutOverrides="VerticalAlignment">
<TextBlock x:Name="BegTime" Text="12:55 AM" TextWrapping="Wrap" FontSize="13.333" d:LayoutOverrides="Height, TopPosition, BottomPosition" SelectionHighlightColor="White" Margin="8,0,-8,0" />
<TextBlock x:Name="EndTime" Text="12:55 PM" TextWrapping="Wrap" FontSize="13.333" Margin="68,0,-12,0" d:LayoutOverrides="HorizontalAlignment, Height, TopPosition, BottomPosition" />
<TextBlock x:Name="Line" Text="-" TextWrapping="Wrap" FontSize="13.333" Margin="64,0,0,0" d:LayoutOverrides="Height, TopPosition, BottomPosition" />
</Grid>
<Border Margin="281,4,10,6" BorderBrush="Black" BorderThickness="1" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Center" Width="57">
<Grid>
<TextBlock x:Name="RoomNo" Text="1255" TextWrapping="Wrap" FontSize="24" d:LayoutOverrides="HorizontalAlignment, Width, TopPosition, BottomPosition" Margin="2,10,-2,0" />
<TextBlock x:Name="RoomWritten" Text="Room" TextWrapping="Wrap" FontSize="14.667" VerticalAlignment="Top" HorizontalAlignment="Stretch" d:LayoutOverrides="HorizontalAlignment, Width" Margin="9,0,4,0"/>
</Grid>
</Border>
<AppBarButton x:Name="appBarButton" Label="" Margin="158,0" VerticalAlignment="Bottom" Width="32" HorizontalAlignment="Stretch" Icon="Remote" Height="13" d:LayoutOverrides="VerticalAlignment"/>
</Grid>
</Border>
It looks like this
Now I want to add a button like this to make my control show additional info in the bottom, so I want it to expand from the bottom and show additional textblock, like windows 10 notification center does. Than the icon changes and when I press the button again, additional info hides. Can anybody help me?
The type of control you are looking for is called a ToggleButton. It has an IsChecked state property to facilitate the two states for your "open" and "closed". The logic and styling for what is displayed by you when IsChecked is true or false can be controlled via styles.
More information on MSDN: ToggleButton class

WPF FixedDocument background image

Where to put the Background Image for a FixedDocument ? I see it in FlowDocument, but not in FixedDocument.
In FlowDocument
<FlowDocument.Background>
<ImageBrush>
<ImageBrush.ImageSource>
<!--Image source here...-->
</ImageBrush.ImageSource>
</ImageBrush>
</FlowDocument.Background>
You can do it using this way :
<FixedPage xmlns="http://schemas.microsoft.com/xps/2005/06"
Width="793.60" Height="1122.56" xml:lang="fr">
<Canvas>
<Path Data="M 0.00,0.00 L 0.00,3508.00 L 2480.00,3508.00 L 2480.00,0.00 Z">
<Path.Fill>
<ImageBrush ImageSource="xxx.jpg"
TileMode="None"
Viewbox="0,0,3306.67,4677.33"
ViewboxUnits="Absolute"
Viewport="0.00,0.00,2480.00,3508.00"
ViewportUnits="Absolute"/>
</Path.Fill>
</Path>
...
</Canvas>
You should be able to set it page by page using FixedPage.Background for each fixed page:
<DocumentViewer Name="mainRTB" >
<FixedDocument>
<FixedDocument.Resources>
<ImageBrush x:Key="backgroundImage" TileMode="Tile" Stretch="Fill" Viewport="0,0,1.0,0.33333333" AlignmentX="Center">
<ImageBrush.ImageSource>
<!--Image source here...-->
</ImageBrush.ImageSource>
</ImageBrush>
</FixedDocument.Resources>
<PageContent>
<!-- 7" x 9" page -->
<FixedPage Width="672" Height="864" Background="{StaticResource backgroundImage}">
<StackPanel Orientation="Vertical" FixedPage.Left="280" FixedPage.Top="150">
<Label FontFamily="Arial" FontWeight="Bold" FontSize="18" Content="Jane Eyre" HorizontalAlignment="Center"/>
<Label FontFamily="Arial" FontStyle="Italic" FontSize="14" Content="Charlotte Brontë" HorizontalAlignment="Center"/>
</StackPanel>
</FixedPage>
</PageContent>
<PageContent>
<FixedPage Width="672" Height="864" Background="{StaticResource backgroundImage}">
<StackPanel Margin="48">
<TextBlock FontFamily="Cambria" FontSize="14" Width="576" TextWrapping="Wrap">
There was no possibility etc.
</TextBlock>
<TextBlock FontFamily="Cambria" FontSize="14" Width="576" TextWrapping="Wrap" Margin="0,25,0,0">
I was glad of it etc.
</TextBlock>
</StackPanel>
</FixedPage>
</PageContent>
</FixedDocument>
</DocumentViewer>
Seems like it prints too -- at least I saw my background image show up when printing to PDF995.

Inconsistent behavior of Textblock in Silverlight

Hi all,
I found an issue with textblock in my Silverlight application. As observed from the picture I attached, in the "How to play" silverlight page, the title are bound to disappear if I navigate from different route.
Please note that that is static textblock with static wording. Just that from different navigation point, the header wording is missing!
I navigate from screen to screen using this.content = new something; (e.g. : this.content = new instruction())
Can someone guide me on how to overcome this issue? All my page is not usercontrol, but just silverlight page.
<navigation:Page x:Class="SpotTheDifference.UI.Game.Silverlight.instruction"
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"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="893" d:DesignHeight="670"
Title="BonusLink Spot 'd' Difference">
<Grid x:Name="LayoutRoot">
<Image x:Name="imgBG" HorizontalAlignment="Left" Height="670" VerticalAlignment="Top" Width="893" Source="/img/bg/dialogbox-bg.jpg" Visibility="Visible"/>
<Image x:Name="imgPlayGame" HorizontalAlignment="Left" Height="50" Margin="731,209,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_play_red.png"/>
<Button x:Name="btnPlay" Content="" HorizontalAlignment="Left" Margin="731,209,0,0" VerticalAlignment="Top" Width="145" Height="50" Opacity="0" Click="btnPlay_Click" MouseEnter="btnPlay_MouseEnter" MouseLeave="btnPlay_MouseLeave"/>
<Image x:Name="imgScoreBoard" HorizontalAlignment="Left" Height="50" Margin="731,264,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_scoreboard_red.png"/>
<Button x:Name="btnScoreBoard" Content="" HorizontalAlignment="Left" Margin="731,264,0,0" VerticalAlignment="Top" Width="145" Height="50" Opacity="0" Click="btnScoreBoard_Click" MouseEnter="btnScoreBoard_MouseEnter" MouseLeave="btnScoreBoard_MouseLeave"/>
<Image x:Name="imgProfile" HorizontalAlignment="Left" Height="50" Margin="731,319,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_profile_red.png"/>
<Button x:Name="btnProfile" Content="" HorizontalAlignment="Left" Margin="731,319,0,0" VerticalAlignment="Top" Width="145" Height="50" Opacity="0" Click="btnProfile_Click" MouseEnter="btnProfile_MouseEnter" MouseLeave="btnProfile_MouseLeave"/>
<Image x:Name="imgHowToPlay" HorizontalAlignment="Left" Height="50" Margin="731,374,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_howto_green.png"/>
<Image x:Name="imgLogOut" HorizontalAlignment="Left" Height="50" Margin="731,429,0,0" VerticalAlignment="Top" Width="145" Source="/img/btn/btn_logout_red.png"/>
<Button x:Name="btnLogOut" Content="" HorizontalAlignment="Left" Margin="731,429,0,0" VerticalAlignment="Top" Width="145" Height="50" Opacity="0" Click="btnLogOut_Click" MouseEnter="btnLogOut_MouseEnter" MouseLeave="btnLogOut_MouseLeave"/>
<TextBlock x:Name="lblDesc" HorizontalAlignment="Left" Margin="145,250,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="505" Height="195" Foreground="#FF007EFF" FontFamily="Comic Sans MS" FontSize="14.667" FontWeight="Bold">
<Run Text="There will be a set of 2 almost identical pictures revealed every month for players to identify 10 differences each."/>
<LineBreak/>
<Run/>
<LineBreak/>
<Run Text="With every correct click, a circle will appear on the difference spot; whereas every wrong click, the timer will be further reduced."/>
<LineBreak/>
<Run/>
<LineBreak/>
<Run Text="Total play time for this game is 30 seconds."/>
<LineBreak/>
<Run Text="(Hint: The faster you identify the differences, the higher the score)"/>
</TextBlock>
<TextBlock x:Name="lblHeader" Text="Spot 'd' Difference: How to Play Instruction" Margin="146,214,275,427" FontFamily="Comic Sans MS" FontSize="21.333" FontWeight="Bold" Width="472" Height="29" />
</Grid>

WebBrowser does not redirect

I am wondering why my webbrowser doesn't redirect to my html page.
I have a linkbutton on my xaml page with a tap event and i'm creating my object webbrowser when i load first the page.
This is the code I am using :
private void web_Tap(object sender, GestureEventArgs e)
{
wbbrowser.Navigate(new Uri("http://mywebsite.com/index.html", UriKind.Absolute));
}
This is the Xaml i am using :
<controls:PanoramaItem Header="about me">
<!--Double line list with text wrapping-->
<StackPanel Margin="0,0,0,17" Width="432" Height="483" >
<Rectangle Height="186" Width="150" Margin="-250,0,9,10" >
<Rectangle.Fill>
<ImageBrush ImageSource="Img/id.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text ="Name" TextWrapping="Wrap" Margin="12,-6,12,10" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="age" TextWrapping="Wrap" Margin="12,-6,12,10" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="nationality" TextWrapping="Wrap" Margin="12,-6,12,10" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="adress" TextWrapping="Wrap" Margin="12,-6,12,10" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="phone" TextWrapping="Wrap" Margin="12,-6,12,10" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="email" TextWrapping="Wrap" Margin="12,-6,12,10" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="others" TextWrapping="Wrap" Margin="12,-6,12,10" Style="{StaticResource PhoneTextSubtleStyle}"/>
<HyperlinkButton Name="web" Content="web version" Margin="12,-6,12,10" Tap="web_Tap"></HyperlinkButton>
</StackPanel>
</controls:PanoramaItem>
So I am actually not declaring the Phone:WebBrowser.
I just create my object at the main page loaded .
First, you are using the HyperlinkButton the wrong way. You need to add a TargetName="NAME_OF_TARGET" for it to navigate. Second, use the NavigateUri property to navigate to a page instead of handling the tap.
This has been described in the MSDN documentation article.

SL 4 converstion To WPF help

I have this code block in SL4, Can anyone help me to convert this to WPF 4
grate help thanks in advance,
<Grid x:Name="UXLearn" RenderTransformOrigin="0.5,0.5">
<Grid.Projection>
<PlaneProjection LocalOffsetZ="40" />
</Grid.Projection>
<Grid.RenderTransform>
<CompositeTransform ScaleX="0.96" ScaleY="0.96" />
</Grid.RenderTransform>
<TextBlock Margin="0,-110,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Learn Expression Blend" FontFamily="Fonts/Fonts.zip#Segoe WP Light" FontSize="20" TextWrapping="Wrap" Foreground="#FFFB8917">
<TextBlock.Projection>
<PlaneProjection />
</TextBlock.Projection>
</TextBlock>
</Grid>
If you are only using ScaleX and ScaleY, you should be able to replace CompositeTransform with ScaleTransform.
For Grid.Projection, take a look at ViewPort3D.

Categories