We Keep Coding

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

Curve TextBlock in Windows 8

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

How can I show the plot points in Oxyplot for a line Graph?

Here is the xaml code to my graph:
<oxy:Plot HorizontalAlignment="Left"
Height="222"
Margin="0,49,0,0"
VerticalAlignment="Top"
Width="870"
Background="Transparent"
PlotAreaBorderColor="White"
LegendBorder="Transparent"
Name="viewCountPlot"
Title="Videos Watched"
TextColor="White" IsLegendVisible="False" IsManipulationEnabled="False" IsMouseWheelEnabled="False">
<oxy:Plot.Axes>
<oxy:DateTimeAxis Name="datetimeAxis" Position="Bottom" MajorGridlineColor="#40FFFFFF" TicklineColor="White" StringFormat="M/d/yy" IntervalType="Days" ShowMinorTicks="False"/>
</oxy:Plot.Axes>
<oxy:Plot.Series>
<oxy:LineSeries
Name="viewCountSeries"
Title="Videos Viewed"
DataFieldX="Date"
DataFieldY="Value"
Color="#CCFA6800"
StrokeThickness="2"
TrackerFormatString="Date: {2:M/d/yy}
Value: {4}"
ItemsSource="{Binding PlotItems}" MarkerStroke="#FFFDFDFD" />
</oxy:Plot.Series>
<oxy:Plot.DefaultTrackerTemplate>
<ControlTemplate>
<Canvas>
<Grid Canvas.Left="{Binding Position.X}" Canvas.Top="{Binding Position.Y}">
<Ellipse Fill="White" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TranslateTransform X="-6" Y="-6" />
</Ellipse.RenderTransform>
</Ellipse>
<TextBlock Foreground="{DynamicResource OrangeTextColor}" Text="{Binding}" Margin="-60 -40 0 0" />
</Grid>
</Canvas>
</ControlTemplate>
</oxy:Plot.DefaultTrackerTemplate>
</oxy:Plot>
In the plot Series is there any way to show the plot points as circles or something of that nature?
Here is an example image of what I mean, each plot point has a small circle associated with it:

From the linked discussion:
This should be covered by the Marker* properties in the LineSeries
See examples in the Example browser.
It looks like you have to set MarkerFill and MarkerType. To show only markers (and no line), set the Color to Transparent.
<oxy:LineSeries ItemsSource="{Binding MyDataPoints}"
Color="Transparent"
MarkerFill="SteelBlue"
MarkerType="Circle" />

Answered on the Oxyplot forums for those who find this.
https://oxyplot.codeplex.com/discussions/528893

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.