Styling ideas: Containers use inline styles, elements use static styles, and ControlTemplate is used for repeated or complex elements to achieve reuse and simplify code

A, Icon

Icon font is often used in front-end style implementation schemes and can also be used in WPF. However, the bearing object of icon font in WPF is Canvas control. The following mainly introduces how to quickly generate icon font that can be used in WPF

IO /app/#/selec… Click the Preferences button, modify the icon size, select Generate XAML format, and click Download to Download

Configuration panel

Second, the layout

The outermost layer uses Grid panel to achieve top-content layout; The Content layer is embedded with the ScrollViewer control to achieve the scrolling interface

1. Grid Panel

Specify the global unique identifier Name as main, the background color as FFF0F3F6, and the height of the Top field as auto and the height of the Content field as 100*

<Grid x:Name="main" Background="#FFF0F3F6">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="100 *" />
    </Grid.RowDefinitions>
</Grid>
Copy the code

2. Top area

Use the DockPanel panel as the container and set Margin to 30,0; The title and Icon are on the left, and the operation button is on the right. Action buttons use the WrapPanel as the container, and then right-align it

<DockPanel Grid.Row="0" Margin="30, 0">
    <Label Style="{StaticResource top_style_title}">HOST mapping </Label> <Label Template="{StaticResource top_guide}" HorizontalAlignment="Left"></Label>
    <WrapPanel HorizontalAlignment="Right" VerticalAlignment="Center">
        <Label Style="{StaticResource top_style_operation}""> </Label> <Label Style="{StaticResource top_style_operation_disable}"</WrapPanel> </DockPanel>Copy the code

3. Content area

USES the ScrollViewer control as a container and set the Margin to 30, 0, VerticalScrollBarVisibility for Auto (when content exceeds maximum height to display the scroll bar), internal inline the StackPanel again, and specify the Name of the host

<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" Margin="30, 0">
    <StackPanel x:Name="host" Margin="0,0,0,20"></StackPanel>
</ScrollViewer>
Copy the code

4. Preview results

The Content area

3. List area

1. Container layout

The list contains IP address, Url, and selected box, and is divided into three columns. The width of the selected box is fixed at 40, and the IP and Url columns occupy the remaining 30% and 70% width respectively

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="30 *"/>
    <ColumnDefinition Width="70 *"/>
    <ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
Copy the code

2. Text and checkboxes

Text content uses Label to nested TextBlock to achieve the function of automatically displaying ellipses, selected boxes use Rectangle and Canvas to achieve, and then use Visibility to control the display of selected and unselected states

<Label ToolTip="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" Height="26" VerticalContentAlignment="Center">
    <TextBlock Style="{StaticResource content_style_text}"></TextBlock>
</Label>
<Rectangle Grid.Column="2" Visibility="Visible" Style="{StaticResource content_style_rect}"></Rectangle>
<Canvas Grid.Column="2" Width="12" Height="12" Visibility="Collapsed">
    <Path Fill="#FFEC8E72" Data="M10.125 1.5l-5.625 5.625-2.625-2.625-1.875 1.875 4.5 4.5 7.5-7.5z" />
</Canvas>
<Rectangle Grid.Column="2" Visibility="Collapsed" Style="{StaticResource content_style_rect_check}"></Rectangle>
Copy the code

3. Preview results

A list of areas

Series of articles

  • A, Hello World
  • Global styles
  • Static pages
  • 4. Data layer
  • Global events
  • The HOST event
  • 7. HOST mapping
  • Eight, to optimize
  • Executable files

Resources to recommend

  • Fiddler plug-in development guide source code
  • Fiddler – FPlug plug-in
  • Whistle. FPlug plug-in