We Keep Coding

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.

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

Unable to get to "ScrollStates" in ScrollViewer Control

I'm having a lot of trouble trying to get this working, and was hoping someone could help.
I have a ScrollViewer in my WindowsPhone app, and I'm trying to emulate a similar control to the "Date/Time Chooser" that you'd see in the native Calendar app. So my ScrollViewer contains a StackPanel with multiple square Canvases with rectangles and TextBlocks. My intent is to watch the "ScrollStates", and when the VisualState changes to "NotScrolling", I'd then check the VerticalOffset of the ScrollViewer and animate a slide to the nearest "snap-to" position (ie. aligning the square to the correct/middle position).
<ScrollViewer Name="sv" Width="100" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Disabled" Loaded="ScrollViewer_Loaded">
<StackPanel>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="1" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="2" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
<Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3">
<Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" />
<TextBlock Text="3" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" />
</Canvas>
...
</StackPanel>
</ScrollViewer>
I've been looking at various examples that hook into the VisualStates, like http://blogs.msdn.com/b/ptorr/archive/2010/07/23/how-to-detect-when-a-list-is-scrolling-or-not.aspx ; http://developingfor.net/2009/02/16/fun-with-the-wpf-scrollviewer/ ; http://blogs.msdn.com/b/slmperf/archive/2011/06/30/windows-phone-mango-change-listbox-how-to-detect-compression-end-of-scroll-states.aspx ... all seem to have similar code to this:
// Visual States are always on the first child of the control template
FrameworkElement element = VisualTreeHelper.GetChild(sv, 0) as FrameworkElement;
... which then goes on to seek out VisualStateGroup group = FindVisualState(element, "ScrollStates");, from which they can hook an Event to when it changes.
However... whenever I try doing the VisualTreeHelper.GetChild(sv,0) as FrameworkElement, the app crashes with an exception of type 'System.ArgumentOutOfRangeException'. If I output VisualTreeHelper.GetChildrenCount(sv), it is always "0". How is it seemingly working for everyone else? 8)
Any help would be greatly appreciated. Thanks!
(As an alternative, has anyone made this kind of "Select Box" already in a reusable control I could use instead of trying to reinvent it?)

Did you wait till the scrollviewer's Loaded event fires before trying to get the scrollviewer children??

How can I fake my own in App Tiles in Windows Phone

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/