WPF Cách chính xác để sử dụng tệp SVG làm biểu tượng trong WPF

Question

Ai đó có thể mô tả quy trình Bước theo Bước được đề xuất để thực hiện việc này?

EDIT:

Bước 1. Chuyển đổi SVG sang XAML ... thats dễ dàng

Bước2. Giờ thì sao?

Answer 1

Kỹ thuật của bạn sẽ phụ thuộc vào XAML đối tượng mà bộ chuyển đổi SVG sang XAML tạo ra. Nó có tạo ra một bản vẽ không? Một tấm ảnh? Một tấm lưới? Canvas? Một con đường? Một hình học? Trong mỗi trường hợp, kỹ thuật của bạn sẽ khác.

Trong các ví dụ bên dưới, tôi giả sử bạn đang sử dụng biểu tượng trên một nút, đây là kịch bản phổ biến nhất, nhưng lưu ý rằng các kỹ thuật tương tự sẽ hoạt động đối với bất kỳ ContentControl nào.

Sử dụng Vẽ như một biểu tượng

Để sử dụng Vẽ, vẽ một hình chữ nhật approriately cỡ với một DrawingBrush:

<Button> 
    <Rectangle Width="100" Height="100"> 
    <Rectangle.Fill> 
     <DrawingBrush> 
     <DrawingBrush.Drawing> 

      <Drawing ... /> <!-- Converted from SVG --> 

     </DrawingBrush.Drawing> 
     </DrawingBrush> 
    </Rectangle.Fill> 
    </Rectangle> 
</Button> 

Sử dụng một hình ảnh như một biểu tượng

Hình ảnh có thể được sử dụng trực tiếp:

<Button> 
    <Image ... /> <!-- Converted from SVG --> 
</Button> 

Sử dụng một lưới như một biểu tượng

Một lưới có thể được sử dụng trực tiếp:

<Button> 
    <Grid ... /> <!-- Converted from SVG --> 
</Button> 

Hoặc bạn có thể đưa nó vào trong một Viewbox nếu bạn cần phải kiểm soát các kích thước:

<Button> 
    <Viewbox ...> 
    <Grid ... /> <!-- Converted from SVG --> 
    </Viewbox> 
</Button> 

Sử dụng Canvas làm biểu tượng

này cũng giống như sử dụng một hình ảnh hoặc lưới, nhưng vì một canvas không có kích thước cố định bạn cần phải xác định chiều cao và chiều rộng (trừ khi chúng được đã được thiết lập bởi bộ chuyển đổi SVG):

<Button> 
    <Canvas Height="100" Width="100"> <!-- Converted from SVG, with additions --> 
    </Canvas> 
</Button> 

Sử dụng một con đường như một biểu tượng

bạn có thể sử dụng một con đường, nhưng bạn phải thiết lập các cơn đột quỵ hoặc điền một cách rõ ràng:

<Button> 
    <Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions --> 
</Button> 

hoặc

<Button> 
    <Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions --> 
</Button> 

Sử dụng một Geometry như một biểu tượng

Bạn có thể sử dụng một con đường để vẽ hình học của bạn.Nếu nó phải được vuốt ve, thiết lập Stroke:

<Button> 
    <Path Stroke="Red" Width="100" Height="100"> 
    <Path.Data> 
     <Geometry ... /> <!-- Converted from SVG --> 
    </Path.Data> 
    </Path> 
</Button> 

hoặc nếu nó nên được lấp đầy, thiết lập Fill:

<Button> 
    <Path Fill="Blue" Width="100" Height="100"> 
    <Path.Data> 
     <Geometry ... /> <!-- Converted from SVG --> 
    </Path.Data> 
    </Path> 
</Button> 

Làm thế nào để dữ liệu ràng buộc

Nếu bạn đang làm chuyển đổi SVG -> XAML trong mã và muốn XAML kết quả xuất hiện bằng cách sử dụng ràng buộc dữ liệu, sử dụng một trong các thao tác sau:

Gắn kết bản vẽ:

<Button> 
    <Rectangle Width="100" Height="100"> 
    <Rectangle.Fill> 
     <DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" /> 
    </Rectangle.Fill> 
    </Rectangle> 
</Button> 

Ràng buộc một hình ảnh:

<Button Content="{Binding Image}" /> 

Ràng buộc một Lưới:

<Button Content="{Binding Grid}" /> 

Binding Lưới trên một Viewbox:

<Button> 
    <Viewbox ...> 
    <ContentPresenter Content="{Binding Grid}" /> 
    </Viewbox> 
</Button> 

Ràng buộc một Canvas:

<Button> 
    <ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" /> 
</Button> 

Ràng buộc một con đường:

<Button Content="{Binding Path}" /> <!-- Fill or stroke must be set in code unless set by the SVG converter --> 

Ràng buộc một Geometry:

<Button> 
    <Path Width="100" Height="100" Data="{Binding Geometry}" /> 
</Button> 

Answer 2

Bạn có thể sử dụng kết quả xaml từ SVG dưới dạng cọ vẽ trên hình chữ nhật. Một cái gì đó như thế này:

<Rectangle> 
    <Rectangle.Fill> 
     --- insert the converted xaml's geometry here --- 
    </Rectangle.Fill> 
</Rectangle> 

Answer 3

tôi thấy cách tốt nhất để tôi sử dụng biểu tượng svg trong WPF. Tôi sử dụng sharpvector khuôn khổ:

Install-Package SharpVectors 

Vì vậy, XAML của tôi trông giống như sau:

<UserControl ... 
     xmlns:svgc="http://sharpvectors.codeplex.com/svgc/" 
     ...> 
    ... 
    <svgc:SvgViewbox Margin="5" Height="20" Width="20" Stretch="Uniform" Source="/View/Resources/Icons/Connection.Closed.Black.svg"/> 
    ... 
</UserControl> 

Answer 4

Windows 10 Tạo Lập Cập nhật (15.063) natively hỗ trợ hình ảnh SVG, mặc dù với một số gotchas.

Cách sử dụng đơn giản như thiết lập Source cho đường dẫn đến SVG là <Image />. Đó là tương đương với sử dụng SvgImageSource, như sau:

<Image> 
    <Image.Source> 
     <SvgImageSource UriSource="Assets/svg/icon.svg" /> 
    </Image.Source> 
</Image> 

Tuy nhiên, hình ảnh SVG nạp theo cách này (thông qua XAML) may load jagged/aliased. Một cách giải quyết là để xác định một giá trị RasterizePixelHeight hoặc RasterizePixelWidth đó là đôi + chiều cao thực tế của bạn/width:

<SvgImageSource RasterizePixelHeight="300" RasterizePixelWidth="300" UriSource="Assets/svg/icon.svg" /> <!-- presuming actual height or width is under 150 --> 

này có thể được làm việc xung quanh động bằng cách tạo ra một mới SvgImageSource trong trường hợp ImageOpened cho hình ảnh cơ sở:

var svgSource = new SvgImageSource(new Uri("ms-appx://" + Icon)); 
PrayerIcon.ImageOpened += (s, e) => 
{ 
    var newSource = new SvgImageSource(svgSource.UriSource); 
    newSource.RasterizePixelHeight = PrayerIcon.DesiredSize.Height * 2; 
    newSource.RasterizePixelWidth = PrayerIcon.DesiredSize.Width * 2; 
    PrayerIcon2.Source = newSource; 
}; 
PrayerIcon.Source = svgSource; 

Có thể khó nhìn thấy răng cưa trên màn hình không có độ phân giải cao, nhưng đây là một nỗ lực để minh họa nó.

Đây là kết quả của đoạn code trên: một Image sử dụng ban đầu SvgImageSource, và một giây Image dưới nó mà sử dụng SvgImageSource tạo trong trường hợp ImageOpened:

Đây là một thổi lên quan điểm của hình ảnh hàng đầu:

trong khi đây là một cái nhìn thổi lên của Bott om (chống răng cưa, đúng) ảnh:

(bạn sẽ cần phải mở hình ảnh trong một tab mới và xem ở kích thước đầy đủ để đánh giá cao sự khác biệt)