www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫گرافیک و چند رسانه‌ای در WPF - بخش اول


نویسنده: امیر قراجه داغی
تاریخ: ۱۳۹۷/۰۳/۲۴ ۲۳:۵۵
آدرس: www.dntips.ir
برنامه نویسانی که می‌خواهند رابط کاربری و محتوای جالبی بسازند، Windows Presentation Foundation (WPF) از چند رسانه‌ای ، گرافیک برداری، انیمیشن و ترکیبی از آن‌ها پشتیبانی می‌کند. با استفاده از Microsoft Visual Studio می‌توانید یک گرافیک برداری یا انیمیشن پیچیده و درج مدیا را در داخل برنامه داشته باشید.
این مبحث ویژگی‌های گرافیکی، انیمیشن و مدیای WPF  را معرفی می‌کند و شما را برای اضافه کردن گرافیک، افکت، صدا و ویدئو در داخل برنامه‌اتان قادر می‌سازد.
موارد جدیدی که با گرافیک و چند رسانه‌ای در WPF 4 مطرح شده‌اند:
چندین تغییری که مرتبط با انیمیشن و گرافیک می‌باشد اتفاق افتاده است.
  • Layout Rounding :
هنگامیکه لبه‌ی یک شیء در وسط یک دستگاه پیکسلی می‌افتد، سیستم گرافیکی مستقل از DPI می‌تواند لبه‌های تار یا نیمه شفاف را ایجاد و رندر کند.
این مثال تاثیر استفاده از  UseLayoutRounding را شرح می‌دهد. اگر شما در این مثال به آرامی اندازه پنجره را تغییر دهید، تفاوت دو شیء رسم شده را کاملا درک خواهید کرد. 
<Page x:Class="LayoutRounding.Lines"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    Title="Lines" Name="linesPage"  
    >  
  <StackPanel Width="150"  Margin="7" Orientation="Horizontal">  
    <!-- Single pixel line with layout rounding turned OFF.-->  
    <Rectangle UseLayoutRounding="False"  
       Width="45.5" Margin="10" Height="1" Fill="Red"/>  
    <!-- Single pixel line with layout rounding turned ON.-->  
    <Rectangle UseLayoutRounding="True"  
      Width="45.5" Margin="10" Height="1" Fill="Red"/>  
  </StackPanel>  
  <!-- Background Grid -->  
  <Page.Background>  
    <DrawingBrush  Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">  
      <DrawingBrush.Drawing>  
        <DrawingGroup>  
          <GeometryDrawing Brush="White">  
            <GeometryDrawing.Geometry>  
              <RectangleGeometry Rect="0,0,1,1" />  
            </GeometryDrawing.Geometry>  
          </GeometryDrawing>  
          <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z " Brush="#CCCCFF" />  
          <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="#CCCCFF" />  
        </DrawingGroup>  
      </DrawingBrush.Drawing>  
    </DrawingBrush>  
  </Page.Background>  
</Page>
و اگر به تصویر دقت کنید در شی سمت چپ از Layout Rounding استفاده نشده‌است. ولی در شیء سمت راست از Layout Rounding استفاده شده‌است.

برای توضیحات بیشتر در مورد Layout Rounding می‌توانید به لینک درج شده مراجعه کنید.

  • Cached Composition :
با استفاده از کلاس‌های جدید BitmapCache و BitmapCacheBrush می‌توانید یک UIElement یا عنصر پیچیده را cache کنید و تا حد زیادی زمان Render شدن را بهبود دهید. Cached Composition زمانی کاربرد دارد که شما نیاز به animate، translate و ... دارید تا یک UIElement را با سرعت ممکن scale کنید. کلاس BitmapCacheBrush برای استفاده مجدد از یک عنصر ( UIElement)   cache  شده مؤثر می‌باشد. برای cache یک عنصر یا element شما باید یک وهله‌ی جدید از کلاس BitmapCache را ایجاد کنید و  به خصوصیت CacheMode عنصر دسترسی پیدا کنید.
مثال زیر چگونگی استفاده مجدد از عنصر cache شده را نمایش می‌دهد. عنصر cache شده یک Image control می‌باشد که یک عکس بزرگ را نمایش می‌دهد و کنترل تصویر  به صورت bitmap با استفاده از کلاس (BitmapCache) cache شده است و از کلاس BitmapCacheBrush برای استفاده مجدد از یک عنصر ( UIElement) cache شده، استفاده شده‌است و قلم مو یا Brush اختصاص داده شده به Background  از طریق بیست و پنج دکمه تا تاثیرات استفاده مجدد را نمایش دهد.
<Window x:Class="BitmapCacheBrushDemo.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        Height="300" Width="300" >
    <Window.Resources>
        <RichTextBox x:Key="cachedRichTextBox"  >
            <RichTextBox.CacheMode>
                <BitmapCache EnableClearType="True" RenderAtScale="1" SnapsToDevicePixels="True" />
            </RichTextBox.CacheMode>
        </RichTextBox>

        <BitmapCacheBrush x:Key="cachedRichTextBoxBrush" Target="{StaticResource cachedRichTextBox}">
            <BitmapCacheBrush.BitmapCache>
                <BitmapCache EnableClearType="False" RenderAtScale="0.4" SnapsToDevicePixels="False" />
            </BitmapCacheBrush.BitmapCache>
        </BitmapCacheBrush>        
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Name="button1" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Name="button2" Grid.Column="1" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Name="button3" Grid.Column="2" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Name="button4" Grid.Column="3" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Name="button5" Grid.Column="4" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Name="button6" Grid.Row="1" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="1" Name="button7" Grid.Row="1" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="2" Name="button8" Grid.Row="1" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="3" Name="button9" Grid.Row="1" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="4" Name="button10" Grid.Row="1" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Name="button11" Grid.Row="2" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="1" Name="button12" Grid.Row="2" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="2" Name="button13" Grid.Row="2" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="3" Name="button14" Grid.Row="2" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="4" Name="button15" Grid.Row="2" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Name="button16" Grid.Row="3" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="1" Name="button17" Grid.Row="3" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="2" Name="button18" Grid.Row="3" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="3" Name="button19" Grid.Row="3" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="4" Name="button20" Grid.Row="3" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Name="button21" Grid.Row="4" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="1" Name="button22" Grid.Row="4" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="2" Name="button23" Grid.Row="4" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="3" Name="button24" Grid.Row="4" FontWeight="Bold" />
        <Button Background="{StaticResource cachedRichTextBoxBrush}" Content="Button" Grid.Column="4" Name="button25" Grid.Row="4" FontWeight="Bold" />
    </Grid>
</Window>
برای توضیحات بیشتر در مورد Cached Composition می‌توانید به لینک درج شده مراجعه نمایید.
  • Pixel Shader 3 Support :
WPF 4 از ShaderEffect که در WPF 3.5 SP1  معرفی شد پشتیبانی می‌کند و اجازه می‌هد برنامه‌ها Effect را با استفاده از Pixel Shader(PS) version 3.0 اعمال کنند. مدل PS 3.0 Shader به طور چشمگیری پیشرفته‌تر از  از PS 2.0 می‌باشد و این باعث می‌شود Effect‌های متنوع‌تر، بهتر و یا قانع کننده‌تری را سخت افزارها پشتیبانی کنند.
برای آشنایی بیشتر با کلاس  ShaderEffect می‌توانید به لینک درج شده مراجعه نمایید.
  • Easing Functions :
  می‌توانید انیمیشن‌های بیشتری را با easing function اضافه کنید که کنترل زیادی را بر روی رفتار انیمیشن می‌دهد. برای مثال شما می‌توانید یک ElasticEase را به یک انیمیشن اعمال کنید که رفتار انیمیشن را تبدیل به یک پرنده می‌کند. برای اطلاعات بیشتر  به آدرس درج شده مراجعه کنید.
عنوان بخش دوم Graphics and Rendering می‌باشد که در ادامه آشنا خواهیم شد.    
مطالب مشابه