Sự khác biệt về bố cục ứng dụng trong Windows Store

Question

Tôi đang sử dụng Hộp xem để mở rộng canvas kích thước cố định (chứa nhiều đường dẫn khác nhau tạo thành một ảnh có ý nghĩa).

<StackPanel Background="Red" Width="400" UseLayoutRounding="True"> 
    <StackPanel.Resources> 
     <Style TargetType="Viewbox"> 
      <Setter Property="Height" Value="400" /> 
      <Setter Property="Margin" Value="0,0,0,50" /> 
     </Style> 
     <Style TargetType="Path"> 
      <Setter Property="Stroke" Value="Blue" /> 
      <Setter Property="StrokeThickness" Value="2" /> 
     </Style> 
    </StackPanel.Resources> 
    <Viewbox> 
     <Canvas Width="5" Height="5"> 
      <Path Data="M 1,1 h 3 v 3 h -3 z" /> 
     </Canvas> 
    </Viewbox> 
    <Viewbox> 
     <Canvas Width="6" Height="6"> 
      <Path Data="M 1,1 h 4 v 4 h -4 z" /> 
     </Canvas> 
    </Viewbox> 
</StackPanel> 

Xaml này xuất hiện như được hiển thị trên đầu khi được hiển thị trên PC của tôi và được hiển thị ở phía dưới khi được hiển thị trên trình mô phỏng. Khi trình giả lập đang tạo ra kết quả mong muốn, ai đó có thể giải thích cho tôi lý do tại sao đường dẫn thứ hai mở rộng ra ngoài bảng điều khiển màu đỏ?

Answer 1

Có thực sự không phải là một sự khác biệt ... những gì đang xảy ra là bạn đang dùng một cái gì đó mà ám thực sự nhỏ (đường dẫn của bạn là rất nhỏ):

nhìn vào các hộp nhỏ

... và nhân rộng nó lên vô cùng lớn và nói với bố trí để làm tròn cho toàn bộ điểm ảnh gần nhất qua UseLayoutRounding

lý do tại sao kết quả là không đáng tin cậy là Path s đang được thu nhỏ độc lập với số Canvas vì nó không thực sự bố trí nội dung của nó. Vì vậy, khi một trong những đường dẫn của bạn trỏ vào ranh giới pixel không đồng đều (có thể xảy ra ở một số độ phân giải màn hình và không phải là pixel khác), nó làm tròn tới pixel ảo gần nhất bên trong canvas không được chia tỷ lệ và điều này được thu nhỏ từ Viewbox và sau đó làm tròn một lần nữa cho toàn bộ điểm ảnh gần nhất (sử dụng cùng thang tỷ lệ Viewbox được xác định bởi tỷ lệ của Canvas) làm trầm trọng thêm lỗi làm tròn.Bạn có thể thấy điều này được minh họa một cách dễ dàng hơn nếu chúng ta tắt StackPanel.Background (mặc định là trong suốt) thiết lập các Canvas.Background sang xanh lá cây và quay xuống opacity trên màu sắc của đột quỵ:

bạn sẽ nhìn thấy con đường làm tròn khác với canvas

Vì vậy, bạn phải tắt UseLayoutRounding để có dấu thập phân được thực hiện thông qua thao tác hoặc đơn giản hóa bố cục sao cho các lỗi không xảy ra.

Ví dụ, nếu bạn để cho những con đường mở rộng bản thân bằng cách loại bỏ các khung kích thước cố định không phù hợp và không cần thiết và thiết lập Path.Stretch = Uniform bạn kết thúc với:

<StackPanel Background="Red" Width="400" UseLayoutRounding="True"> 
     <StackPanel.Resources> 
      <Style TargetType="Viewbox"> 
       <Setter Property="Height" Value="400" /> 
       <Setter Property="Margin" Value="0,0,0,50" /> 
      </Style> 
      <Style TargetType="Path"> 
       <Setter Property="Stroke" Value="Blue" /> 
       <Setter Property="StrokeThickness" Value="2" /> 
       <Setter Property="Stretch" Value="Uniform" /> 
      </Style> 
     </StackPanel.Resources> 
     <Viewbox> 
      <Path Data="M 1,1 h 3 v 3 h -3 z" /> 
     </Viewbox> 
     <Viewbox> 
      <Path Data="M 1,1 h 4 v 4 h -4 z" /> 
     </Viewbox> 
    </StackPanel> 

kết quả là:

có lẽ những gì bạn đang thực sự tìm kiếm

Tuy nhiên, nếu điều này đơn giản hơn và bạn thực sự có nhiều đường dẫn mà bạn dự định đặt bên trong Canvas của mình, tôi khuyên bạn nên sử dụng vùng chứa thực sự có bố cục riêng, lựa chọn hiển nhiên là Grid theo cách này bạn vẫn có thể tự mở rộng đường dẫn các Grid giữ chúng trong khóa bước (Canvas s sẽ không bố trí con cái của họ). Mã này sẽ như thế nào:

<StackPanel Background="Red" Width="400" UseLayoutRounding="True"> 
     <StackPanel.Resources> 
      <Style TargetType="Viewbox"> 
       <Setter Property="Height" Value="400" /> 
       <Setter Property="Margin" Value="0,0,0,50" /> 
      </Style> 
      <Style TargetType="Path"> 
       <Setter Property="Stroke" Value="Blue" /> 
       <Setter Property="StrokeThickness" Value="2" /> 
       <Setter Property="Stretch" Value="Uniform" /> 
      </Style> 
     </StackPanel.Resources> 
     <Viewbox> 
      <Grid Width="5" Height="5"> 
       <Path Data="M 1,1 h 3 v 3 h -3 z" /> 
      </Grid> 
     </Viewbox> 
     <Viewbox> 
      <Grid Width="6" Height="6"> 
       <Path Data="M 1,1 h 4 v 4 h -4 z" /> 
      </Grid> 
     </Viewbox> 
    </StackPanel> 

và kết quả là giống với một mà không có một container thứ

hy vọng điều này giúp -ck

Answer 2

tôi có thể tạo lại vấn đề trên máy tính của tôi với giả lập ở độ phân giải màn hình của 2560x1440 với vải như dưới đây.

<Canvas Width="4" Height="4"> 
    <Rectangle Width="4" Height="4" Fill="Blue" ></Rectangle> 
</Canvas> 

Đối với đoạn mã trên - canvas tràn xuống/vượt ra ngoài bảng màu đỏ.

<Canvas Width="6" Height="6"> 
    <Rectangle Width="6" Height="6" Fill="Blue" ></Rectangle> 
</Canvas> 

Đối với đoạn mã trên, hãy để khoảng trống bên phải của bảng màu đỏ.

nếu kích thước canvas được giữ nhiều trong số 5, nó vừa với bảng màu đỏ.

Nó không có vẻ là một vấn đề với đường dẫn vì nó tái tạo với rect cũng. Dường như vấn đề với quy mô ViewBox. Tôi thấy rằng với UseLayoutRounding="False" trên stackpanel - các vấn đề không tái tạo. Tôi cũng tìm thấy một số related thread khi tìm kiếm các vấn đề mở rộng ViewBox. Nó gợi ý sử dụng thuộc tính SnapsToDevicePixels nhưng không có sẵn cho các cửa sổ lưu trữ các ứng dụng xaml.

Tóm lại, có vẻ như đó là vấn đề với việc mở rộng ViewBox mặc dù tôi không phải là chuyên gia có kiến ​​thức nội bộ về quy mô mở rộng hộp xem. Giải pháp có thể có là đặt UseLayoutRounding thành false nếu nó vượt qua bài kiểm tra trên một máy khác. Đa số 5 không giống như giải pháp tốt nhưng bạn có thể kiểm tra. Trên một lưu ý riêng biệt - nếu bạn chỉ tò mò muốn biết tại sao nó xảy ra, bạn nhận được câu trả lời và có thể bị tràn/tràn vài pixel có thể quan trọng đối với ứng dụng của bạn.