WPF Как правильно использовать файлы SVG в качестве значков в WPF

Ваш метод будет зависеть от того, какой объект XAML создает конвертер SVG в XAML. Создает ли он рисунок? Картинка? Сетка? Холст? Путь? Геометрия? В каждом случае ваша техника будет разной.

В приведенных ниже примерах я предполагаю, что вы используете свой значок на кнопке, что является наиболее распространенным сценарием, но учтите, что те же методы будут работать для любого ContentControl.

Использование рисунка в качестве значка

Чтобы использовать рисунок, нарисуйте прямоугольник подходящего размера с помощью кисти DrawingBrush:

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

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

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

Использование изображения в качестве значка

Изображение может использоваться напрямую:

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

Использование Сетка как значок

Сетка может использоваться напрямую:

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

Или вы можете включить ее в окно просмотра, если вам нужно контролировать размер:

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

Использование холста в качестве значка

Это похоже на использование изображение или сетку, но поскольку холст не имеет фиксированного размера, вам необходимо указать высоту и ширину (если они еще не установлены конвертером SVG):

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

Использование пути в качестве значка

Вы можете использовать путь , но вы должны явно указать обводку или заливку:

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

или

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

Использование геометрии в качестве значка

Вы можете использовать контур для рисования вашей геометрии. Если его нужно обвести, установите Обводку:

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

или, если он должен быть заполнен, установите Заливку:

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

Как привязать данные

Если вы выполняете преобразование SVG -> XAML в коде и хотите, чтобы в результате XAML отображается с использованием привязки данных, используйте одно из следующих действий:

Привязка чертежа:

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

Привязка изображения:

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

Привязка сетки:

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

Привязка сетки в окне просмотра:

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

Привязка Canvas:

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

Привязка пути:

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

Привязка геометрии:

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