Author: coder

Clipped Button

Posted on by coder 


   
      
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Button HorizontalAlignment="Center" VerticalAlignment="Center"
            FontSize="24" Width="200" Height="100"
            Clip="M  0 50 A 100 50 0 0 0 200 50
                          A 100 50 0 0 0   0 50
                  M 90 50 A  10 10 0 0 0 110 50
                          A  10 10 0 0 0  90 50" >
        Clipped Button
    </Button>

</Grid>

Clipping

Posted on by coder 


   
      

<Window x:Class="Drawing.Clipping"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Clipping" Height="352" Width="707.2"
    >
  <Window.Resources>
    <GeometryGroup x:Key="clipGeometry" FillRule="Nonzero">
      <EllipseGeometry RadiusX="75" RadiusY="50" Center="100,150"></EllipseGeometry>
      <EllipseGeometry RadiusX="100" RadiusY="25" Center="200,150"></EllipseGeometry>
      <EllipseGeometry RadiusX="75" RadiusY="130" Center="140,140"></EllipseGeometry>
    </GeometryGroup>
  </Window.Resources>
  <Grid>

    <Button Clip="{StaticResource clipGeometry}">A button</Button>
    <Image Grid.Column="1" Clip="{StaticResource clipGeometry}" 
           Stretch="None"  Source="c:image.jpg"></Image>
  </Grid>
</Window>

Clipping With Viewbox

Posted on by coder 


   
      

<Window x:Class="Drawing.ClippingWithViewbox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ClippingWithViewbox" Height="335.2" Width="401.6"
    >
  <Window.Resources>
    <GeometryGroup x:Key="clipGeometry" FillRule="Nonzero">
      <EllipseGeometry RadiusX="75" RadiusY="50" Center="100,150"></EllipseGeometry>
      <EllipseGeometry RadiusX="100" RadiusY="25" Center="200,150"></EllipseGeometry>
      <EllipseGeometry RadiusX="75" RadiusY="130" Center="140,140"></EllipseGeometry>
    </GeometryGroup>
  </Window.Resources>
  <Grid>
    <Viewbox >
      <Button Width="350" Height="350" Clip="{StaticResource clipGeometry}">A button</Button>
    </Viewbox>
  </Grid>
</Window>

Dynamic Clipping

Posted on by coder 


   
  
<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
  mc:Ignorable="d"
  x:Class="PaintDrawExamples.DynamicClipping" 
  Width="640" Height="480">

    <StackPanel.Resources>
        <Storyboard x:Key="OnLoaded"/>
    </StackPanel.Resources>
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard x:Name="OnLoaded_BeginStoryboard" Storyboard="{DynamicResource OnLoaded}"/>
        </EventTrigger>
    </StackPanel.Triggers>
    <Canvas Height="100" x:Name="Canvas" Width="436">
        <Canvas.Clip>
            <PathGeometry>
                <PathFigure StartPoint="1,5" IsClosed="True" IsFilled="True">
                    <BezierSegment IsSmoothJoin="True" Point1="2,2" Point2="26,1" Point3="24,127" IsStroked="True"/>
                    <BezierSegment IsSmoothJoin="True" Point1="1,1" Point2="14,9" Point3="19,5" IsStroked="True"/>
                    <BezierSegment IsSmoothJoin="True" Point1="14,11" Point2="18,-22.5" Point3="24,-2" IsStroked="True"/>
                    <BezierSegment IsSmoothJoin="True" Point1="26,-200" Point2="29,1" Point3="300,5" IsStroked="True"/>
                </PathFigure>
            </PathGeometry>
        </Canvas.Clip>
        <Rectangle d:LayoutOverrides="Height" Stroke="{x:Null}" Fill="Red" Width="436" Height="100" x:Name="Rectangle" Canvas.Left="0" Canvas.Top="0"/>
        <Label Background="Black" x:Name="Label" Content="This is my clipped space." Canvas.Left="46" Canvas.Top="26" d:IsHidden="True"/>
    </Canvas>
</StackPanel>
//File:Window.xaml.cs

using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Input;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;

namespace PaintDrawExamples
{
    public partial class DynamicClipping
    {
        public DynamicClipping()
        {
            this.InitializeComponent();
            this.Canvas.VerticalAlignment = VerticalAlignment.Center;
            this.Canvas.HorizontalAlignment = HorizontalAlignment.Center;

            CompositionTarget.Rendering += CompositionTarget_Rendering;
        }

        private void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            Point mousePos = Mouse.GetPosition(this.Canvas);
            Geometry clippingRegion = this.Canvas.Clip;

            TranslateTransform newPos = new TranslateTransform();
            newPos.X = mousePos.X - (this.Canvas.Width / 2);
            newPos.Y = mousePos.Y - (this.Canvas.Height / 2);

            clippingRegion.Transform = newPos;
        }
    }
}

Use CollectionViewSource to sort and group data in XAML.

Posted on by coder 


   
  


<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
  xmlns:src="clr-namespace:WpfApplication1"
  xmlns:dat="clr-namespace:System.Windows.Data;assembly=PresentationFramework" 
  Title="CollectionViewSourceSample">

  <Window.Resources>

    <src:Places x:Key="places"/>

    <CollectionViewSource Source="{StaticResource places}" x:Key="cvs">
      <CollectionViewSource.SortDescriptions>
        <scm:SortDescription PropertyName="CityName"/>
      </CollectionViewSource.SortDescriptions>
      <CollectionViewSource.GroupDescriptions>
        <dat:PropertyGroupDescription PropertyName="State"/>
      </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>

  </Window.Resources>
  <DockPanel>
    <ListBox ItemsSource="{Binding Source={StaticResource cvs}}" DisplayMemberPath="CityName" Name="lb">
      <ListBox.GroupStyle>
        <x:Static Member="GroupStyle.Default"/>
      </ListBox.GroupStyle>
    </ListBox>
  </DockPanel>
</Window>

//File:Window.xaml.cs

using System.Windows;
using System.Collections.ObjectModel;

namespace WpfApplication1
{

    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }


    }

    public class Place
    {
        private string name;

        private string state;

        public string CityName
        {
            get { return name; }
            set { name = value; }
        }

        public string State
        {
            get { return state; }
            set { state = value; }
        }

        public Place()
        {
            this.name = "";
            this.state = "";
        }

        public Place(string name, string state)
        {
            this.name = name;
            this.state = state;
        }
    }

    public class Places : ObservableCollection<Place>
    {
        public Places()
        {
            Add(new Place("A", "WA"));
            Add(new Place("B", "WA"));
            Add(new Place("C", "WA"));
        }
    }
}

Create CollectionViewSource

Posted on by coder























//File:Window.xaml.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace WpfApplication1 {

public class Employee : INotifyPropertyChanged {
public event PropertyChangedEventHandler PropertyChanged;
protected void Notify(string propName) {
if( this.PropertyChanged != null ) {
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}

string name;
public string Name {
get { return this.name; }
set {
if( this.name == value ) { return; }
this.name = value;
Notify(“Name”);
}
}

int age;
public int Age {
get { return this.age; }
set {
if( this.age == value ) { return; }
this.age = value;
Notify(“Age”);
}
}

public Employee() { }
public Employee(string name, int age) {
this.name = name;
this.age = age;
}
}

class People : ObservableCollection { }

public partial class Window1 : System.Windows.Window {
public Window1() {
InitializeComponent();
}

}

public class AgeToRangeConverter : IValueConverter {

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
return (int)value < 25 ? "Under 25" : "Over 25"; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } } [/csharp]

Use a VisualBrush to magnify a portion of the screen.

Posted on by coder 


   
  

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  x:Class="Microsoft.Samples.Graphics.UsingVisualBrush.MagnifyingGlassExample"
  Background="White">
  <Page.Resources>
    <Style TargetType="{x:Type Paragraph}">
      <Setter Property="Margin" Value="10" />
    </Style>
    <DrawingBrush x:Key="MyGridBackgroundBrushResource"
      Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <DrawingGroup.Children>
            <GeometryDrawing Brush="White">
              <GeometryDrawing.Geometry>
                <RectangleGeometry Rect="0,0,1,1" />
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing Brush="#E6E8F6"
              Geometry="M 0,0 L 0,1 0.1,1 0.1,0.1 1,0.1 1,0 Z" />                      
          </DrawingGroup.Children>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>   
    
  </Page.Resources>

  <Grid>  
    <ScrollViewer>
      <StackPanel Name="magnifiedPanel" 
        VerticalAlignment="Stretch"
        MouseMove="updateMagnifyingGlass" 
        Background="{StaticResource MyGridBackgroundBrushResource}">
        
        <FlowDocumentScrollViewer>
        <FlowDocument>
<Paragraph><Button></Button></Paragraph>

<Paragraph><Border BorderBrush="Black" BorderThickness="1"><Image Source="c:image.jpg" Stretch="None" /></Border></Paragraph>

<Paragraph>this is a test</Paragraph> 
        </FlowDocument>
        </FlowDocumentScrollViewer>
      </StackPanel>
    </ScrollViewer>
    <Canvas Name="magnifyingGlassCanvas">
      <Ellipse Name="magnifyingGlassEllipse" Width="100" Height="100" Stroke="Black">
        <Ellipse.Fill>
          <DrawingBrush>
            <DrawingBrush.Drawing>
              <DrawingGroup>
                <DrawingGroup.Children>
                   <GeometryDrawing Brush="White">
                    <GeometryDrawing.Geometry>
                      <RectangleGeometry Rect="0,0,1,1" />
                    </GeometryDrawing.Geometry>
                  </GeometryDrawing>
                   <GeometryDrawing>
                    <GeometryDrawing.Brush>
                       <VisualBrush x:Name="myVisualBrush" ViewboxUnits="Absolute"
                        Visual="{Binding ElementName=magnifiedPanel}"/>
                    </GeometryDrawing.Brush>
                    <GeometryDrawing.Geometry>
                      <RectangleGeometry Rect="0,0,1,1" />
                    </GeometryDrawing.Geometry>
                  </GeometryDrawing>
                </DrawingGroup.Children>
              </DrawingGroup>
            </DrawingBrush.Drawing>
          </DrawingBrush>
        </Ellipse.Fill>
      </Ellipse>
    </Canvas>
  </Grid>
</Page>

//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Input;

namespace Microsoft.Samples.Graphics.UsingVisualBrush
{
    public partial class MagnifyingGlassExample : Page
    {
        private static readonly double distanceFromMouse = 5;
        
        public MagnifyingGlassExample()
        {
        }
        private void updateMagnifyingGlass(object sender, MouseEventArgs args)
        {
            Mouse.SetCursor(Cursors.Cross);
            Point currentMousePosition = args.GetPosition(this);
            if (this.ActualWidth - currentMousePosition.X > magnifyingGlassEllipse.Width + distanceFromMouse)
            {
                Canvas.SetLeft(magnifyingGlassEllipse, currentMousePosition.X + distanceFromMouse);
            }
            else
            {
                Canvas.SetLeft(magnifyingGlassEllipse, currentMousePosition.X - distanceFromMouse - magnifyingGlassEllipse.Width);
            }
            
            if (this.ActualHeight - currentMousePosition.Y > magnifyingGlassEllipse.Height + distanceFromMouse)
            {
                Canvas.SetTop(magnifyingGlassEllipse, currentMousePosition.Y + distanceFromMouse);
            }
            else
            {
                Canvas.SetTop(magnifyingGlassEllipse, currentMousePosition.Y - distanceFromMouse - magnifyingGlassEllipse.Height);
            }
            myVisualBrush.Viewbox = new Rect(currentMousePosition.X - 10, currentMousePosition.Y  - 10, 20, 20);
        }
    }
}