Windows Presentation Foundation

ToolBar button with Customized painting

Posted on by coder 


   
    

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Top">
    <ToolBarTray>
      <ToolBar>
        <Button>Second toolbar</Button>
        <Button>
          <Canvas Width="16" Height="16" >
            <Polygon Stroke="Black" SnapsToDevicePixels="True" StrokeThickness="0.5" Points="1.5,14.5 4.5,7.5 15.5,7.5 12.5,14.5" >
              <Polygon.Fill>
                <LinearGradientBrush StartPoint="0.25,0" EndPoint="0.5,1">
                  <GradientStop Offset="0" Color="#FF4" />
                  <GradientStop Offset="1" Color="#CA7" />
                </LinearGradientBrush>
              </Polygon.Fill>
            </Polygon>
          </Canvas>
        </Button>
      </ToolBar>
    </ToolBarTray>
</Page>

ToolBarTray

Posted on by coder 


   
    
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Top">
    <ToolBarTray>
      <ToolBar>
        <Button>
          <Canvas Width="16" Height="16" SnapsToDevicePixels="True">
            <Polygon Stroke="Black" StrokeThickness="0.5" Points="2.5,1.5 9.5,1.5 12.5,4.5 12.5,15 2.5,15">
              <Polygon.Fill>
                <LinearGradientBrush StartPoint="1,1" EndPoint="0.2,0.7">
                  <GradientStop Offset="0" Color="#AAA" />
                  <GradientStop Offset="1" Color="White" />
                </LinearGradientBrush>
              </Polygon.Fill>
            </Polygon>
            <Polygon Stroke="Black" Fill="DarkGray" StrokeThickness="0.5" StrokeLineJoin="Bevel" Points="9.5,1.5 9.5,4.5 12.5,4.5" />
          </Canvas>
        </Button>
      </ToolBar>
      <ToolBar>
        <Button>Second toolbar</Button>
        <CheckBox IsChecked="True">Choice</CheckBox>
      </ToolBar>
    </ToolBarTray>
</Page>

Basic Toolbar

Posted on by coder 


   
    

<Window x:Class="MenusAndToolbars.BasicToolbar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="BasicToolbar" Height="300" Width="400">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
      </Grid.RowDefinitions>
      <ToolBar>
        <Separator></Separator>
        <Button>Open</Button>
        <Button>Save</Button>
        <Button>Close</Button>
        <Separator></Separator>
        <CheckBox FontWeight="Bold">Bold</CheckBox>
        <CheckBox FontStyle="Italic">Italic</CheckBox>
        <CheckBox>
          <TextBlock TextDecorations="Underline">Underline</TextBlock>
        </CheckBox>
        <Separator></Separator>        
        <ComboBox SelectedIndex="0">
          <ComboBoxItem>100%</ComboBoxItem>
          <ComboBoxItem>50%</ComboBoxItem>
          <ComboBoxItem>25%</ComboBoxItem>
        </ComboBox>
      </ToolBar>
    </Grid>
  
</Window>

Toolbar Trays

Posted on by coder 


   
    
<Window x:Class="MenusAndToolbars.ToolbarTrays"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ToolbarTrays" Height="300" Width="300"
    >
  <DockPanel>
    <ToolBarTray DockPanel.Dock="Top" >
      <ToolBar>
        <Button ToolBar.OverflowMode="Never">One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ToolBar>
      <ToolBar>
        <Button ToolBar.OverflowMode="Never">A</Button>
        <Button ToolBar.OverflowMode="Never">B</Button>
        <Button>C</Button>
      </ToolBar>      
      <ToolBar Band="1">
        <Button>Red</Button>
        <Button>Blue</Button>        
        <Button>Green</Button>
        <Button>Black</Button>
      </ToolBar>
    </ToolBarTray>    
    <!--<ToolBarTray DockPanel.Dock="Left" Orientation="Vertical">
      <ToolBar>
        <Button>One</Button>
        <Button>One</Button>
        <Button>One</Button>
      </ToolBar>
    </ToolBarTray>-->
    <TextBox></TextBox>
  </DockPanel>
</Window>

Compare the appearances of these controls with the ones in the ToolBar.

Posted on by coder 


   
    



<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="White">
  <Window.Resources>
    <Style x:Key="{x:Static ToolBar.SeparatorStyleKey}" TargetType="Separator">
      <Setter Property="Background" Value="DarkBlue"/>
      <Setter Property="Width" Value="2"/>
    </Style>

    <Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button">
      <Setter Property="Foreground" Value="Blue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style x:Key="{x:Static ToolBar.CheckBoxStyleKey}" TargetType="CheckBox">
      <Setter Property="Foreground" Value="DarkSlateBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
    
    <Style x:Key="{x:Static ToolBar.MenuStyleKey}" TargetType="Menu">
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="FontStyle" Value="Italic"/>
      <Setter Property="FontWeight" Value="Bold"/>
      <Setter Property="Background" Value="LightSteelBlue"/>
    </Style>
    
    <Style x:Key="{x:Static ToolBar.RadioButtonStyleKey}" TargetType="RadioButton">
      <Setter Property="Background" Value="LightSteelBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
   
    <Style x:Key="{x:Static ToolBar.TextBoxStyleKey}" TargetType="TextBox">
      <Setter Property="Background" Value="DarkBlue"/>
      <Setter Property="Foreground" Value="White"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="FontStyle" Value="Italic"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
      <Setter Property="Width" Value="75"/>
    </Style>
    
    <Style x:Key="{x:Static ToolBar.ComboBoxStyleKey}" TargetType="ComboBox">
      <Setter Property="Background" Value="LightSteelBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="MinWidth" Value="60"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
    
    <Style TargetType="Separator">
      <Setter Property="Background" Value="DarkBlue"/>
      <Setter Property="Width" Value="2"/>
    </Style>

    <Style TargetType="Button">
      <Setter Property="Foreground" Value="Blue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style TargetType="CheckBox">
      <Setter Property="Foreground" Value="DarkSlateBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style TargetType="Menu">
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="FontStyle" Value="Italic"/>
      <Setter Property="FontWeight" Value="Bold"/>
      <Setter Property="Background" Value="LightSteelBlue"/>
    </Style>

    <Style TargetType="RadioButton">
      <Setter Property="Background" Value="LightSteelBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style TargetType="TextBox">
      <Setter Property="Background" Value="DarkBlue"/>
      <Setter Property="Foreground" Value="White"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="FontStyle" Value="Italic"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
      <Setter Property="Width" Value="75"/>
    </Style>

    <Style TargetType="ComboBox">
      <Setter Property="Background" Value="LightSteelBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="MinWidth" Value="60"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
  </Window.Resources>

  <StackPanel>

    <WrapPanel Background="LightBlue"
               Margin="10,10,3,3" 
               Grid.Column="0" Grid.Row="4">
      <Button Margin="2" Content="Button 1"/>
      <Button Margin="2" Content="Button 2"/>
      <CheckBox Margin="2" Content="CheckBox 1"/>
      <CheckBox Margin="2" Content="CheckBox 2"/>
      <RadioButton Margin="2">One</RadioButton>
      <RadioButton Margin="2">Two</RadioButton>
      <ComboBox Margin="2">
        <ComboBoxItem IsSelected="True">Item 1</ComboBoxItem>
        <ComboBoxItem>Item 2</ComboBoxItem>
        <ComboBoxItem>Item 3</ComboBoxItem>
        <ComboBoxItem>Item 4</ComboBoxItem>
      </ComboBox>
      <TextBox Margin="2"/>
      <Menu Margin="2">
        <MenuItem Header="Menu">
          <MenuItem Header="File">
            <MenuItem Header="Copy"/>
            <MenuItem Header="Paste"/>
          </MenuItem>
        </MenuItem>
      </Menu>
    </WrapPanel>


  </StackPanel>
</Window>

ToolBar.ButtonStyleKey

Posted on by coder 


   
    


<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="White">
  <Window.Resources>
    <Style x:Key="{x:Static ToolBar.SeparatorStyleKey}" TargetType="Separator">
      <Setter Property="Background" Value="DarkBlue"/>
      <Setter Property="Width" Value="2"/>
    </Style>

    <Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button">
      <Setter Property="Foreground" Value="Blue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style x:Key="{x:Static ToolBar.CheckBoxStyleKey}" TargetType="CheckBox">
      <Setter Property="Foreground" Value="DarkSlateBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
    
    <Style x:Key="{x:Static ToolBar.MenuStyleKey}" TargetType="Menu">
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="FontStyle" Value="Italic"/>
      <Setter Property="FontWeight" Value="Bold"/>
      <Setter Property="Background" Value="LightSteelBlue"/>
    </Style>
    
    <Style x:Key="{x:Static ToolBar.RadioButtonStyleKey}" TargetType="RadioButton">
      <Setter Property="Background" Value="LightSteelBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
   
    <Style x:Key="{x:Static ToolBar.TextBoxStyleKey}" TargetType="TextBox">
      <Setter Property="Background" Value="DarkBlue"/>
      <Setter Property="Foreground" Value="White"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="FontStyle" Value="Italic"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
      <Setter Property="Width" Value="75"/>
    </Style>
    
    <Style x:Key="{x:Static ToolBar.ComboBoxStyleKey}" TargetType="ComboBox">
      <Setter Property="Background" Value="LightSteelBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="MinWidth" Value="60"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
    
    <Style TargetType="Separator">
      <Setter Property="Background" Value="DarkBlue"/>
      <Setter Property="Width" Value="2"/>
    </Style>

    <Style TargetType="Button">
      <Setter Property="Foreground" Value="Blue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style TargetType="CheckBox">
      <Setter Property="Foreground" Value="DarkSlateBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style TargetType="Menu">
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="FontStyle" Value="Italic"/>
      <Setter Property="FontWeight" Value="Bold"/>
      <Setter Property="Background" Value="LightSteelBlue"/>
    </Style>

    <Style TargetType="RadioButton">
      <Setter Property="Background" Value="LightSteelBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <Style TargetType="TextBox">
      <Setter Property="Background" Value="DarkBlue"/>
      <Setter Property="Foreground" Value="White"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="FontStyle" Value="Italic"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
      <Setter Property="Width" Value="75"/>
    </Style>

    <Style TargetType="ComboBox">
      <Setter Property="Background" Value="LightSteelBlue"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="MinWidth" Value="60"/>
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
  </Window.Resources>

  <StackPanel>
    <ToolBarTray Margin="10,10,3,3" 
                 Grid.Column="0" Grid.Row="2"
                 Background="LightBlue">
      <ToolBar >
        <Button Content="Button 1"/>
        <Button Content="Button 2"/>
        <Separator/>
        <CheckBox Content="CheckBox 1"/>
        <CheckBox Content="CheckBox 2"/>
        <Separator/>
        <RadioButton>One</RadioButton>
        <RadioButton>Two</RadioButton>
        <Separator/>
        <ComboBox>
          <ComboBoxItem IsSelected="True">Item 1</ComboBoxItem>
          <ComboBoxItem>Item 2</ComboBoxItem>
          <ComboBoxItem>Item 3</ComboBoxItem>
          <ComboBoxItem>Item 4</ComboBoxItem>
        </ComboBox>
        <TextBox/>
        <Separator/>
        <Menu>
          <MenuItem Header="Menu">
            <MenuItem Header="File">
              <MenuItem Header="Copy"/>
              <MenuItem Header="Paste"/>
            </MenuItem>
          </MenuItem>
        </Menu>
      </ToolBar>
    </ToolBarTray>


  </StackPanel>
</Window>