Cách sử dụng hình ảnh vector xaml làm nguồn hình ảnh trong ứng dụng cửa sổ 8

Question

Tôi đã tạo một số nội dung trong inkscape và muốn sử dụng chúng làm biểu tượng trong ứng dụng windows 8. Tôi đã thực hiện một số đọc và nó seams rằng trong khi. Net 4.5 hỗ trợ SVG, the modern ui profile does not. Tôi đã chuyển đổi svg thành xaml bằng cách sử dụng this tool.

Tôi nhận được xaml sau.

<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="svg2997" Width="744.09448" Height="1052.3622" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> 
    <Canvas x:Name="layer1"> 
    <Path Fill="#FFCCCCCC" Stroke="#FF000000" StrokeThickness="1.34377062" StrokeMiterLimit="4" x:Name="path3007" Data="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z" /> 
    </Canvas> 
</Canvas> 

Nếu tôi thêm trực tiếp ứng dụng này vào xaml, nó sẽ hiển thị theo tỷ lệ.

Tôi muốn sử dụng điều này làm nguồn hình ảnh cho đối tượng hình ảnh nếu có thể.

<Image HorizontalAlignment="Left" Height="100" Margin="127,37,0,0" VerticalAlignment="Top" Width="100" Source="Assets/plus_circle.xaml"/> 

Việc này có thể thực hiện được không?

Answer 1

Hầu hết các nút AppBar đều dựa trên kiểu được bao gồm trong StandardStyles được gọi là AppBarButtonStyle.

Để tùy chỉnh các văn bản của các nút bạn thiết lập AutomationProperties.Name tài sản gắn liền, để tùy chỉnh biểu tượng trên nút bạn thiết lập Content bất động sản, và nó cũng là một ý tưởng tốt để thiết lập các AutomationProperties.AutomationId thuộc tính đính kèm vì lý do trợ năng.

Dưới đây là một ví dụ về một nút tùy chỉnh sử dụng phương pháp này:

<Style x:Key="FolderButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}"> 
    <Setter Property="AutomationProperties.AutomationId" Value="FolderAppBarButton"/> 
    <Setter Property="AutomationProperties.Name" Value="Folder"/> 
    <Setter Property="Content" Value="&#xE188;"/> 
</Style> 

Như đã đề cập ở trên, để tùy chỉnh biểu tượng bạn thiết lập Content tài sản. Thách thức là cách bạn đặt nội dung để nó hiển thị nghệ thuật vector tùy chỉnh của bạn.

Nó chỉ ra rằng bạn có thể đặt bất kỳ đường dẫn Xaml, thậm chí của bạn, vào một hộp kiểm Viewbox để thay đổi tỷ lệ của nó. Đó là cách tiếp cận đầu tiên của tôi, nhưng nó không hoạt động. Trong thực tế, có vẻ như bất kỳ lúc nào bạn sử dụng ký hiệu mở rộng Xaml để đặt thuộc tính Nội dung cho một nút nó không hoạt động.

<Style x:Key="SquareButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}"> 
<Setter Property="AutomationProperties.AutomationId" Value="SquareAppBarButton"/> 
<Setter Property="AutomationProperties.Name" Value="Square"/> 
<Setter Property="Content"> 
    <Setter.Value> 
     <!-- This square will never show --> 
     <Rectangle Fill="Blue" Width="20" Height="20" /> 
    </Setter.Value> 
</Setter> 

Tôi thực sự nghĩ rằng đây là một lỗi, nhưng may mắn là có một cách giải quyết.

Tim Heuer đã viết xuất sắc bài viết về cách đơn giản nhất để sử dụng hình ảnh Đường dẫn làm tác phẩm nghệ thuật cho nút. Điều đó là ở đây:

http://timheuer.com/blog/archive/2012/09/03/using-vectors-as-appbar-button-icons.aspx

Nói tóm lại, bạn cần phải xác định một phong cách thiết lập tất cả các cam kết ràng buộc một cách chính xác:

<Style x:Key="PathAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase"> 
<Setter Property="ContentTemplate"> 
    <Setter.Value> 
     <DataTemplate> 
      <Path Width="20" Height="20" 
       Stretch="Uniform" 
       Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
       Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/> 
     </DataTemplate> 
    </Setter.Value> 
</Setter> 

Sau đó, bạn tạo ra một phong cách được thừa kế từ phong cách đó và bạn dán vào đường dẫn của mình. Đây là phong cách cho tác phẩm nghệ thuật của bạn, bạn liệt kê ở trên:

<Style x:Key="CrossButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource PathAppBarButtonStyle}"> 
    <Setter Property="AutomationProperties.AutomationId" Value="CrossAppBarButton"/> 
    <Setter Property="AutomationProperties.Name" Value="Cross"/> 
    <Setter Property="Content" Value="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z"/> 
</Style> 

Và cuối cùng, bạn sử dụng nó trong AppBar của bạn như thế này:

<Button Style="{StaticResource CrossButtonStyle}" /> 

hỗ trợ Dev, hỗ trợ thiết kế và sự tốt lành tuyệt vời hơn trên đường: http://bit.ly/winappsupport

Answer 2

Tôi khá tích cực bạn không thể chỉ tiêm PathData thành một ImageSource và hi vọng nó làm việc trừ khi đó là thông qua một đối tượng Drawing như Source. Tuy nhiên, những gì bạn có thể làm là áp dụng Path của mình vào một ContentControl để sử dụng lại theo cách tương tự mà không phải trải qua sự cố của các đối tượng Drawing cho mỗi trường hợp.

Vì vậy, thay vì;

<Image Source="..."/> 

Chỉ cần làm điều gì đó như thế này và đặt nó trong Object.Resources hoặc ResourceDictionary;

<Style x:Key="YourThingy" TargetType="ContentControl"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ContentControl"> 
        <Path Fill="#FFCCCCCC" Stroke="#FF000000" StrokeThickness="1.34377062" StrokeMiterLimit="4" x:Name="path3007" Data="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z" /> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Sau đó, chỉ cần chạm vào chế độ xem của bạn ở bất cứ đâu và bao nhiêu lần tùy thích;

<ContentControl Style="{StaticResource YourThingy}"/> 

Tuy nhiên, bạn sẽ muốn chơi với Đường dẫn đó của bạn. Có vẻ như thiết lập một kích thước lớn, nhưng hy vọng điều này cung cấp một lựa chọn tốt cho hoàn cảnh của bạn. Chúc mừng!