Resizing the book depending on page size?

[Bex]

Hello!

I am quite new to silverlight, but I think I'm getting to grips with the layout of it now.

I am using the Book control.. which is brilliant, but I am hoping I can get it to resize depending how big my silverlight areas or page is, but cannot work out how.

On one page I want the book to appear full screen, but on another page only half the size but coming from the same xaml page.

I am using the silverlight control on my aspx page

  <asp:Silverlight ID="Book" runat="server" Source="~/ClientBin/Eprint.Skyline.Silverlight.xap"
            MinimumVersion="2.0.31005.0" Width="400" Height="278.5"/>

and have tried just setting minwidths and minheights in the xaml page.. which is mostly working, and the silverlight part of the page grows and shrinks depending how big my asp silverlight control is set..

The only part I cant get to resize at all is the book.. this either stays huge or doesn't appear at all.

Am I attempting to do something impossible or is there a way to do it?

Thanks

Bex

[Kiril Stanoev]

Hello Becky,

I am not sure that I fully understand what the issue here is but let me throw few explanations in the dark that might help. If you do not use any widths and heights in your silverlight application...

<UserControl x:Class="Application1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">
    <Grid x:Name="LayoutRoot">
        <telerikNavigation:RadBook ... />
    </Grid>
</UserControl>

... RadBook will take the size that is defined in the aspx silverlight object...

<asp:Silverlight ID="Book" runat="server" Source="~/ClientBin/Eprint.Skyline.Silverlight.xap"
            MinimumVersion="2.0.31005.0" Width="400" Height="278.5"/>

Give it a try a little bit more time and if nothing works, could you please send us a sample project demonstrating the issue you are experiencing or if you are not able to attach a project, at least paste us the code of a project reproducing the issue. I'd be glad to further asst you.

All the best,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Bex]

Hi!

Thanks for your reply!
Ok.. I have worked out what I was doing wrong.. I had my book in a canvas control as a container..this is what was not resizing!

Now it is resizing it has raised another question.. 

As I am not setting my page size, depending on the size of my silverlight control the book pages are actually wider or taller than my actual page images so each page has white space on both the left and the right  or top and bottom of the page image.

Is there a setting to tell it just to make the book page as wide as the image? or a way of telling it to keep to specific proportions.

Here is my page template (as in the examples)

    <UserControl.Resources>
        <DataTemplate x:Key="PageTemplate">
            <!--book page-->
            <Border Background="White" BorderBrush="Black" BorderThickness="2" VerticalAlignment="top">
                <Grid VerticalAlignment="top">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Image Source="{Binding PhotoSource}" HorizontalAlignment="Center" VerticalAlignment="top" Stretch="Uniform" Grid.Row="0" />
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>

and my actual book:

 <Controls:RadBook x:Name="book1" LeftPageTemplate="{StaticResource PageTemplate}" FirstPagePosition="Right"
                RightPageTemplate="{StaticResource PageTemplate}" VerticalAlignment="Top" Margin="20" Grid.Row="1" Grid.Column="1"
                          PageChanged="book1_PageChanged"/>

I'm sorry if these questions are a bit silly, but as well as learning how to use the silverlight telerik controls, silverlight its self is new to me so I haven't quite got the concepts yet!

Bex

[Kiril Stanoev]

Hi Becky,

For this scenario to work you will need to do few things. First, you need to make sure that all the images you give to the book are with the same size. To book does not work properly if the sizes of its pages do not match. I have attached a sample project that shows how the book takes as much space as necessary for the images to be displayed. As a further reading, I'd suggest you take a look at Image's Stretch property. Additionally, for your scenario to work, the book has to have its FirstPagePosition set to Left.
Give it a try and let me know if you have further questions.

Kind regards,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Bex]

Hello

Thanks for your reply again.

I have almost got it working how I want but with the combination of a rad window and book control within a silverlight grid it keeps chopping the bottom of the whole silverlight control off at certain page sizes..

A brief outline of what I am doing.. 

I have some documents that I want the user to be able to preview.. when they click preview a rad window pops up (an asp ajax one not silverlight) this is resizes by javascript depending on the size of the browser. This window contains 

My XAML is as follows:

<UserControl
    x:Class="Eprint.Skyline.Silverlight.DocumentBook"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    VerticalAlignment="Top">
    <UserControl.Resources>
        <DataTemplate x:Key="PageTemplate">
            <!--book page-->
            <Border Background="White" BorderBrush="Black" BorderThickness="2" VerticalAlignment="top">
                <Grid VerticalAlignment="top">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Image Source="{Binding PhotoSource}" HorizontalAlignment="Center" VerticalAlignment="top" Stretch="Uniform" Grid.Row="0" />
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>
    <!--main grid-->
    <Grid x:Name="LayoutRoot" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"></RowDefinition>

        </Grid.RowDefinitions>
        <!--top border-->
        <Border CornerRadius="8" Background="AliceBlue" BorderBrush="#cccccc" BorderThickness="1" Grid.Row="0">
            <Grid VerticalAlignment="Top" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="33.5" />
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <!--top bar -->
                <Border CornerRadius="8 8 0 0" Grid.Row="0" Background="#007799" BorderBrush="#cccccc" BorderThickness="0" Height="33.5">
                    <Grid>
                        <TextBlock Foreground="#ffffff" Margin="10 0 10 0" x:Name="DocumentNameLabel" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                    </Grid>

                </Border>
                <!--book-->

                <Controls:RadBook x:Name="book1" LeftPageTemplate="{StaticResource PageTemplate}" FirstPagePosition="Right"
                RightPageTemplate="{StaticResource PageTemplate}" VerticalAlignment="Top" Margin="20" Grid.Row="1" Grid.Column="1"
                          PageChanged="book1_PageChanged"/>
            </Grid>
        </Border>
        <!--bottom tool bar-->
        <Border CornerRadius="8" Background="#007799" BorderBrush="#cccccc"  BorderThickness="1" Height="30"  Grid.Row="1" VerticalAlignment="Bottom">
            <Grid>

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button Click="BackButton_Click" x:Name="BackButton" Margin="10 0 10 0" Height="20" Grid.Column="1" Width="20">
                        <Image Width="16" Height="16" Source="images/goback.png" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Button>
                    <TextBlock Foreground="#ffffff" Margin="10 0 10 0" x:Name="PageNumbersLabel" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                    <Button Click="ForwardButton_Click" x:Name="ForwardButton" Margin="10 0 10 0" Height="20" Grid.Column="3" Width="20">
                        <Image Width="16" Height="16" Source="images/go.png"  VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Button>
                </StackPanel>

            </Grid>

        </Border>

    </Grid>
</UserControl>

This javascript is used to popup the window

        function DocumentPreview(id, continuetoorder, pg) {


            var manager = GetRadWindowManager();
            var win = manager.GetWindowByName('DocumentPreview');

            var winHeight = win.get_height();
            var winWidth = win.get_width();

            if (win.get_height() >= windowHeight) {
                winHeight = (windowHeight - 75);
            }

            if (win.get_width() >= windowWidth) {
                winWidth = (windowWidth - 75);
            }



            var url = '<%= ResolveUrl("/Preview.aspx")%>?did=' + id + '&continuetoorder=' + continuetoorder + '&pg=' + pg;
            if (continuetoorder) {
                var previewed = '<%=Session["Previewed"] %>';
                if (previewed == null) { previewed = ''; }
                if (previewed.indexOf(id) != -1) {
                    window.location = '<%= ResolveUrl("/ChooseDocumentType.aspx")%>?did=' + id + '&pg=' + pg;
                } else {
                    SetPreviewed(id);
                    win.SetUrl(url);
                    win.set_height(winHeight);
                    win.set_width(winWidth);
                    win.center();

                    win.Show();

                }

            } else {
                SetPreviewed(id);
                win.SetUrl(url);
                win.set_height(winHeight);
                win.set_width(winWidth);
                win.center();
                win.Show();
            }
        }

This is my preview window has the following:

    <asp:Panel ID="SilverlightPanel" runat="server" Visible="true" BackColor="White">
        <asp:Panel runat="server" ID="SilverlightContinueToOrderPanel">
            <asp:Label runat="server" ID="SilverlightMustPreviewDesc" SkinID="NoTrans" Text="Please review the document before proceeding with this order<br/>" />
            <asp:Button ID="SilverlightPlaceOrderButton" runat="server" Text="Place Order" SkinID="NoTrans" />
            <asp:Button ID="SilverlightCloseButton" runat="server" OnClientClick="javascript:CloseWindow();" Text="Close Window" SkinID="NoTrans" />
        </asp:Panel>
        <asp:Silverlight ID="Book" runat="server" Source="~/ClientBin/Eprint.Skyline.Silverlight.xap" Windowless="false" Height="100%" Width="100%" />
        <asp:Panel ID="SilverlightDownloadButtons" runat="server">
            <asp:CheckBox ID="cbDontAsk" runat="server" SkinID="NoTrans" />
            <br />
            <asp:Button ID="btnClassic" runat="server" ImageUrl="~/images/Buttons/ClassicView.gif" OnClick="btnClassic_Click" />
        </asp:Panel>
    </asp:Panel>

For some reason when I run this on a 1024 / 768 monitor the bottom of my silverlight is missing (the bottom of the book and the forward and backward buttons)

Is this something you can help with? as I have spent hours trying to get it to work properly but it's not working.

Bex

[Kiril Stanoev]

Hi Becky,

I ran only the Silverlight part of the code you've sent, but I think I understand what is going on. This is what I got initially:



Then I noticed that you were using Stretch="Uniform" in the PageTemplate. I changed it to None and this is what I got:



Give it a try and let me know if this does not work. I'd be glad to further assist you.

Regards,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Bex]

Hello!

I have actually tried this, and just did again.. and it does the same.
Also something to note, I am using the same silverlight control on a different page, and this one, the asp:silverlight has a set width and height rather than 100%, when I set the stretch to none, the silverlight is again way too big (before it was fine).

Do you have ny other ideas?

Bex

[Kiril Stanoev]

Hi Becky,

I it possible to send us a sample project reproducing the issue? This way we can locate the problem faster without the need of guessing.

All the best,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Bex]

Hi!

I have submitted a ticket with ID:290775

[Kiril Stanoev]

Hi Becky,

A reply has already been posted in the support ticket you've opened.

Greetings,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.