none
这样的布局设计,怎样兼容分辨率??? RRS feed

  • 问题

  • 这样的布局设计,怎样兼容分辨率???

     

    1、HTML载入Silverlight部分

         问题一:下面的“Div”和“object”的“宽和高”都要设置为“100%”对吧???

    <div id="mainShowDiv">
                <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="1100"    height="543">
               <param name="source" value="../ClientBin/MyCharts.xap"/>
                        <param name="initparams" value="ChartType=ElectricityMonitoringFunc" />
               <param name="onError" value="onSilverlightError" />
               <param name="background" value="white" />
               <param name="minRuntimeVersion" value="4.0.50826.0" />
               <param name="autoUpgrade" value="true" />
               <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none"/>
               </a>
       </object>
        </div>

    2、XAML部分

          

    <UserControl 
        x:Class="MyCharts.EnergyStatistics"
        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"
        xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
        xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" Width="1100" Height="543" 

    问题二:“UserControl ”的宽和高应该怎样设置???  怎样设置为“100%”???    “d:DesignHeight 、d:DesignWidth” 和 “Width 、 Height”有什么不同???
        xmlns:my="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts">



        <Grid x:Name="LayoutRoot" Width="1100" Height="543" Background="White">

              问题三:这个“Grid”的宽和高都设为“100%”???   怎样设置???


            <Canvas HorizontalAlignment="Left" Height="65" VerticalAlignment="Top" Width="1100" Background="#FFE1E1E1">
                问题四:要使“Canvas”的高度固定,其值为“ 65”。而其宽度则为“100%”,使宽度根据分辨率变化而变化。
            </Canvas>
            <!--<Canvas Margin="0,65,0,0">-->

            <Grid Margin="0,65,0,0">
               问题五:此“Grid”和上面的“Canvas”平级,它们两个一上一下。此“Grid”的宽度设置“100%”,而高度则应填充满“Canvas”剩余的区域(Canvas高度固定为了“65”),应该怎样布局才可以???      应该怎样做???
            </Grid>
        </Grid>
    </UserControl>

                                                                                                                                                                                               

    Science and technology is my lover.

    2012年6月6日 7:30

答案

  • 问题一:下面的“Div”和“object”的“宽和高”都要设置为“100%”对吧???

    对的

    问题二:“UserControl ”的宽和高应该怎样设置???  怎样设置为“100%”???   

    通过以下代码你可以发现内部的Grid填充了整个页面,通过HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

        <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Red">
            <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Black">
    
            </Canvas>
        </Grid>

     “d:DesignHeight 、d:DesignWidth” 和 “Width 、 Height”有什么不同??

    d:DesignHeight 、d:DesignWidth可以忽略,这个是设计时的视图,并不是运行时的视图

    问题三:这个“Grid”的宽和高都设为“100%”???   怎样设置???

    见问题二

    问题四:要使“Canvas”的高度固定,其值为“ 65”。而其宽度则为“100%”,使宽度根据分辨率变化而变化。

        <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Red">
            <Canvas Height="65" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Black">
    
            </Canvas>
        </Grid>

    问题五:此“Grid”和上面的“Canvas”平级,它们两个一上一下。此“Grid”的宽度设置“100%”,而高度则应填充满“Canvas”剩余的区域(Canvas高度固定为了“65”),应该怎样布局才可以???      应该怎样做???

    你这个就需要运行时确定了,ActualHeight-65=需要设置的Grid高度.

    或者直接提供一个Grid,Canvas放在第一行,Grid放在第二行(建议)

    • 已标记为答案 Otomii Lu 2012年6月14日 2:01
    2012年6月11日 1:55