locked
ViewBox for Canvas

    Question

  • Hi,

    How to add ViewBox for following DataTemplate so that it resize canvas depending on Screen Resolutions in xaml.

    Canvas consist of images dependong upon X,Y coordinates.

     <DataTemplate x:Key="FullGroupTemplate">
                        <Grid Margin="1,0,0,6">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Button
                        Grid.Row="0"
                        Content="{Binding Title}"
                        Click="Header_Click"
                        Style="{StaticResource TextButtonStyle}"/>  
                    <Canvas Grid.Row="1" Margin="0,0,80,0"   VerticalAlignment="Top">
    
                    </Canvas>
                    
                </Grid>
                    


     
    Monday, January 19, 2015 7:43 AM

Answers

  • Your images are set to 100x100, so they can't stretch and grow.  See the code on this page so you can see how this works:

    https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.viewbox.aspx


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, January 22, 2015 3:49 PM
    Moderator

All replies

  • Hi - I don't understand exactly what you're asking for.  Can you please elaborate?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, January 19, 2015 7:43 PM
    Moderator
  • Hi Matt,

    I have the datatemplate which consist of images.

    images are arranged using canvas.left,canvas.top(X,Y Co-Ordinates).Images width,Height,X,Y Co-Ordinates is comming from server.The app is working fine for normal screen resolution(1366*768) .but when we run app on different resolution such as(2560*1440,1920*1080) the images are too small.

    When we run and projected it on projector,the images will be small there(I am not sure,not tried on projector).

    I have Read about ViewBox that scale the apps according to resolution of screen.

    But for my current DataTemplate,Viewbox is not working.

    So can you please tell me what is wrong here? or is there any other way to run app on different resolutions.

    <DataTemplate x:Key="FullGroupTemplate">
                        <Grid Margin="1,0,0,6">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Button
                        Grid.Row="0"
                        Content="{Binding Title}"
                        Click="Header_Click"
                        Style="{StaticResource TextButtonStyle}"/>  
    
                     <Viewbox>
                    <Canvas Grid.Row="1" Margin="0,0,80,0"   VerticalAlignment="Top">
    
                    </Canvas>
                    </Viewbox>
                </Grid>
    </DataTemplate >
    Tuesday, January 20, 2015 6:01 AM
  • This is the Template that we are using to diaplay images in Above Canvas.

    <DataTemplate x:Key="FullItemTemplate"> <Grid HorizontalAlignment="Left" Margin="0,0,10,10" Canvas.Left="{Binding Left}" Canvas.Top="{Binding Top}"> <Grid.Resources> <common:BooleanToVisibilityConverter x:Key="booleanToVisibility" /> </Grid.Resources> <Border Background="#0098C9" Visibility="{Binding ShowIcon, Converter={StaticResource booleanToVisibility}}" > <Image Source="{Binding Image}" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Top" /> </Border> <Border Background="Transparent" Visibility="{Binding ShowIcon, Converter={StaticResource booleanToVisibility}, ConverterParameter=True}"> <Image Margin="0,0,10,10" Source="{Binding Image}" Height="{Binding Height, Converter={StaticResource heightConverter}}" Width="{Binding Width, Converter={StaticResource sizeConverter}}" Stretch="{Binding Stretch}" HorizontalAlignment="{Binding HorizontalAlignment}" VerticalAlignment="{Binding VerticalAlignment}"/> </Border> </Grid> </DataTemplate>


    Tuesday, January 20, 2015 6:06 AM
  • Your images are set to 100x100, so they can't stretch and grow.  See the code on this page so you can see how this works:

    https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.viewbox.aspx


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, January 22, 2015 3:49 PM
    Moderator