2015-07-11 199 views
1

我有一個WPF項目這個頁面在Visual Studio 2013奇怪的行爲

但是當我執行它,它表明這一點:

如果我最大化它,它顯示:

enter image description here

這是XAML頁面代碼:

<Page x:Class="ControlDomotico.Client.MenuPrincipal" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    mc:Ignorable="d" 
Title="MenuPrincipal" d:DesignHeight="633.654" d:DesignWidth="877.835"> 

<Grid> 
    <Grid.Background> 
     <ImageBrush ImageSource="d:\Documents\Visual Studio 2013\Projects\ControlDomotico\ControlDomotico.Client\images\menu.jpg"> 
      <ImageBrush.Transform> 
       <TransformGroup> 
        <ScaleTransform ScaleY="1.05"/> 
        <SkewTransform/> 
        <RotateTransform/> 
        <TranslateTransform X="-11"/> 
       </TransformGroup> 
      </ImageBrush.Transform> 
     </ImageBrush> 
    </Grid.Background> 
    <Label Content="Bienvenido a tu casa" FontSize="30px" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="10.453,3.723" Height="53" Width="309" Margin="10,10,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="#00000000" Foreground="#FF0F0101" FontWeight="Bold"/> 

    <Button Name="claveBtn" Width="100" Content="Cambiar clave" 
    Height="100" Margin="439,40,339,493.6" > 
     <Button.Template> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <Ellipse Stroke="Black" 
        StrokeThickness="2"> 
         <Ellipse.Fill> 
          <RadialGradientBrush> 
           <GradientStop Offset="0" 
             Color="Gold" /> 
           <GradientStop Offset="1" 
             Color="Gold" /> 
           <GradientStop Offset="1" 
             Color="Gold" /> 
           <RadialGradientBrush.Transform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.Transform> 
          </RadialGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <ContentPresenter HorizontalAlignment="Center" 
           VerticalAlignment="Center"/> 
       </Grid> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 
    <Button Name="alarmaBtn" Width="100" Content="Configurar alarma" 
     Height="100" Margin="588,95,190,438.6"> 
     <Button.Template> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
        <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
         <Ellipse.Fill> 
          <RadialGradientBrush> 
           <RadialGradientBrush.Transform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.Transform> 
           <GradientStop Offset="0" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
          </RadialGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
       </Grid> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 
    <Button Name="horaBtn" Width="100" Content="Cambiar hora" 
     Height="100" Margin="732,198,46,335.6" Click="horaBtn_Click"> 
     <Button.Template> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
        <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
         <Ellipse.Fill> 
          <RadialGradientBrush> 
           <RadialGradientBrush.Transform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.Transform> 
           <GradientStop Offset="0" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
          </RadialGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
       </Grid> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 
    <Button Name="puertaBtn" Width="100" Content="Puerta" 
     Height="100" Margin="607,308,171,225.6"> 
     <Button.Template> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
        <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
         <Ellipse.Fill> 
          <RadialGradientBrush> 
           <RadialGradientBrush.Transform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.Transform> 
           <GradientStop Offset="0" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
          </RadialGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
       </Grid> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 
    <Button Name="iluminacionBtn" Width="100" Content="Iluminación" 
     Height="100" Margin="588,463,190,70.6"> 
     <Button.Template> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
        <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
         <Ellipse.Fill> 
          <RadialGradientBrush> 
           <RadialGradientBrush.Transform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.Transform> 
           <GradientStop Offset="0" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
          </RadialGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
       </Grid> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 
    <Button Name="baneraBtn" Width="100" Content="Bañera" 
     Height="100" Margin="439,508,339,25.6"> 
     <Button.Template> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
        <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
         <Ellipse.Fill> 
          <RadialGradientBrush> 
           <RadialGradientBrush.Transform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.Transform> 
           <GradientStop Offset="0" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
           <GradientStop Offset="1" 
            Color="Gold" /> 
          </RadialGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
       </Grid> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 
</Grid> 

我不明白這種行爲,可以幫助我與好嗎?

+0

正在發生的事情是,你要設置一個大小對於100 x 100的按鈕,當您縮小表格時,它會導致按鈕的可用空間縮小,但是您的按鈕具有靜態大小,因此會導致剪裁。考慮設置你的Window的MinHeight和MaxHeight屬性來防止窗口被拉伸到很小,或者你可以看到是否將你的'Grid'封裝在'ViewBox'中。 –

+0

嘗試刪除任何填充或邊距,將水平和垂直對齊設置爲零。可以幫助您 – 2015-07-11 02:07:16

+0

我已經嘗試了兩種方法,但沒有任何效果 –

回答

1

窗口的大小與由於某種原因在Buttons上設置的邊距衝突。我建議您在XAML編輯器中使用RowDefinitions & Column DefinitionsGrid而不是在XAML設計器中設計代碼。但是,解決方案的快速解決方案是:

a:將Window/Page大小增加到833 x 933或類似的東西。

B:附上您的代碼在ViewBox像這樣:

<Viewbox> 
    <Grid Background="Red"> 

     <Label Content="Bienvenido a tu casa" FontSize="30px" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="10.453,3.723" Height="53" Width="309" Margin="10,10,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="#00000000" Foreground="#FF0F0101" FontWeight="Bold"/> 

     <Button Name="claveBtn" Width="100" Content="Cambiar clave" 
    Height="100" Margin="664,445.5,106,257.5" > 
      <Button.Template> 
       <ControlTemplate TargetType="Button"> 
        <Grid> 
         <Ellipse Stroke="Black" 
        StrokeThickness="2"> 
          <Ellipse.Fill> 
           <RadialGradientBrush> 
            <GradientStop Offset="0" 
             Color="Gold" /> 
            <GradientStop Offset="1" 
             Color="Gold" /> 
            <GradientStop Offset="1" 
             Color="Gold" /> 
            <RadialGradientBrush.Transform> 
             <TransformGroup> 
              <ScaleTransform ScaleY="0.65" /> 
             </TransformGroup> 
            </RadialGradientBrush.Transform> 
           </RadialGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <ContentPresenter HorizontalAlignment="Center" 
           VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Button.Template> 
     </Button> 
     <Button Name="alarmaBtn" ClipToBounds="True" Content="Configurar alarma" Width="100" Height="100" Click="alarmaBtn_Click" Margin="581,103.55,189,599.45"> 
      <Button.Template> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid> 
         <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
          <Ellipse.Fill> 
           <RadialGradientBrush> 
            <RadialGradientBrush.Transform> 
             <TransformGroup> 
              <ScaleTransform ScaleY="0.65" /> 
             </TransformGroup> 
            </RadialGradientBrush.Transform> 
            <GradientStop Offset="0" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
           </RadialGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Button.Template> 
     </Button> 
     <Button Name="horaBtn" Width="100" Content="Cambiar hora" 
     Height="100" Margin="485,597.5,285,105.5" > 
      <Button.Template> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid> 
         <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
          <Ellipse.Fill> 
           <RadialGradientBrush> 
            <RadialGradientBrush.Transform> 
             <TransformGroup> 
              <ScaleTransform ScaleY="0.65" /> 
             </TransformGroup> 
            </RadialGradientBrush.Transform> 
            <GradientStop Offset="0" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
           </RadialGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Button.Template> 
     </Button> 
     <Button Name="puertaBtn" Width="100" Content="Puerta" 
     Height="100" Margin="689,236.5,81,466.5" > 
      <Button.Template> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid> 
         <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
          <Ellipse.Fill> 
           <RadialGradientBrush> 
            <RadialGradientBrush.Transform> 
             <TransformGroup> 
              <ScaleTransform ScaleY="0.65" /> 
             </TransformGroup> 
            </RadialGradientBrush.Transform> 
            <GradientStop Offset="0" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
           </RadialGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Button.Template> 
     </Button> 
     <Button Name="iluminacionBtn" Width="100" Content="Iluminación" 
     Height="100" Margin="385,58.5,385,644.5" > 
      <Button.Template> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid> 
         <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
          <Ellipse.Fill> 
           <RadialGradientBrush> 
            <RadialGradientBrush.Transform> 
             <TransformGroup> 
              <ScaleTransform ScaleY="0.65" /> 
             </TransformGroup> 
            </RadialGradientBrush.Transform> 
            <GradientStop Offset="0" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
           </RadialGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Button.Template> 
     </Button> 
     <Button Name="baneraBtn" Width="100" Content="Bañera" 
     Height="100" Margin="204,629.5,566,73.5" > 
      <Button.Template> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid> 
         <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
          <Ellipse.Fill> 
           <RadialGradientBrush> 
            <RadialGradientBrush.Transform> 
             <TransformGroup> 
              <ScaleTransform ScaleY="0.65" /> 
             </TransformGroup> 
            </RadialGradientBrush.Transform> 
            <GradientStop Offset="0" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
            <GradientStop Offset="1" 
            Color="Gold" /> 
           </RadialGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Button.Template> 
     </Button> 
    </Grid> 
    </Viewbox> 
0

而不是使用的利潤率和固定大小的按鈕,你應該將你的面板爲假想電網領域這樣的形象:

enter image description here

然後例如「Cambiar clave」位於Grid.Row = 0 Grid.Column = 1或至於「Puerta」Grid.Row = 3 Grid.Column = 2等等。這是可以做到這樣的:

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="1*"/> 
     <RowDefinition Height="1*"/> 
     <RowDefinition Height="1*"/> 
     <RowDefinition Height="1*"/> 
     <RowDefinition Height="1*"/> 
     <RowDefinition Height="1*"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="3*"/> 
     <ColumnDefinition Width="1*"/> 
     <ColumnDefinition Width="1*"/> 
     <ColumnDefinition Width="1*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.Background> 
     <ImageBrush ImageSource="d:\Documents\Visual Studio 2013\Projects\ControlDomotico\ControlDomotico.Client\images\menu.jpg"> 
      <ImageBrush.Transform> 
       <TransformGroup> 
        <ScaleTransform ScaleY="1.05"/> 
        <SkewTransform/> 
        <RotateTransform/> 
        <TranslateTransform X="-11"/> 
       </TransformGroup> 
      </ImageBrush.Transform> 
     </ImageBrush> 
    </Grid.Background> 
    <Label Content="Bienvenido a tu casa" FontSize="30px" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="10.453,3.723" Height="53" Width="309" Margin="10,10,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="#00000000" Foreground="#FF0F0101" FontWeight="Bold"/> 
    <Button Name="claveBtn" Content="Cambiar clave" 
    Grid.Row="0" Grid.Column="1" Template="{StaticResource RoundButton}"/> 
    <Button Name="alarmaBtn" Content="Configurar alarma" 
    Grid.Row="1" Grid.Column="2" Template="{StaticResource RoundButton}"/> 
    <Button Name="horaBtn" Content="Cambiar hora" 
    Grid.Row="2" Grid.Column="3" Template="{StaticResource RoundButton}" /> 
    <Button Name="puertaBtn" Content="Puerta" 
    Grid.Row="3" Grid.Column="2" Template="{StaticResource RoundButton}"/> 
    <Button Name="iluminacionBtn" Content="Iluminación" 
    Grid.Row="4" Grid.Column="2" Template="{StaticResource RoundButton}"/> 
    <Button Name="baneraBtn" Content="Bañera" 
    Grid.Row="5" Grid.Column="1" Template="{StaticResource RoundButton}"/> 
</Grid> 

你也應該定義ControlTemplate在資源部分(我把它叫做RoundButton),以避免重複代碼:

<Page.Resources> 
    <ControlTemplate x:Key="RoundButton" TargetType="Button"> 
     <Grid> 
      <Ellipse Stroke="Black" 
       StrokeThickness="2"> 
       <Ellipse.Fill> 
        <RadialGradientBrush> 
         <GradientStop Offset="0" 
            Color="Gold" /> 
         <GradientStop Offset="1" 
            Color="Gold" /> 
         <GradientStop Offset="1" 
            Color="Gold" /> 
         <RadialGradientBrush.Transform> 
          <TransformGroup> 
           <ScaleTransform ScaleY="0.65" /> 
          </TransformGroup> 
         </RadialGradientBrush.Transform> 
        </RadialGradientBrush> 
       </Ellipse.Fill> 
      </Ellipse> 
      <ContentPresenter HorizontalAlignment="Center" 
          VerticalAlignment="Center"/> 
     </Grid> 
    </ControlTemplate> 
</Page.Resources>