Image Compress websites

punypng

http://www.gracepointafterfive.com/punypng/

PunyPNG is a free website optimization tool that dramatically
reduces the file size of your images without any loss of quality.

 

Smush.it™

http://developer.yahoo.com/yslow/smushit/

Image optimization is an art few have mastered. Useful image editing tools exist that allow images to be edited to reduce their file size while retaining image quality. Using these tools is a good start for optimizing images, but more can be done using advanced tools like Smush.it.

 

OptiPNG: Advanced PNG Optimizer

http://optipng.sourceforge.net/

OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information. This program also converts external formats (BMP, GIF, PNM and TIFF) to optimized PNG, and performs PNG integrity checks and corrections.

3D Ellipse in Xaml

This example is using gradient to make the ellipse look like as  a 3d Ellipse .

here is the source code of the example. Because the code is short and easy to understand ,So just have a  look.

 

<Canvas>
  <Ellipse Canvas.Left ="120" Canvas.Top="60" Stroke="black" Margin="25,50,0,0" StrokeThickness="4" Height="100" Width="100">
    <Ellipse.Fill>
      <RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.144,0.303">
        <GradientStop Color="LightBlue" Offset="0.1" />
        <GradientStop Color="SkyBlue" Offset="0.3" />
        <GradientStop Color="Blue" Offset="0.7" />
        <GradientStop Color="DarkBlue" Offset="1" />
      </RadialGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
</Canvas>

播放器 musicplayer in silverlight

網上看了幾看文獻所寫的一個播放器,事先聲明很垃圾的.我純粹試試mediaelement而已.

mainpage.xaml

1. <UserControl x:Class="musicPlayer.MainPage"


2.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"


3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"


4.    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"


5.    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">


6.     <Grid x:Name="LayoutRoot" ShowGridLines="True" Background="Black">


7.         <MediaElement x:Name="media" Source="HUMAN_TOUCH.mp3" AutoPlay="False"/>


8.  


9.         <StackPanel VerticalAlignment="Stretch">


10.             <Button Content="Play" x:Name="play" Click="play_Click" Margin="5" />


11.             <Button Content="Pause" x:Name="pause" Click="pause_Click" Margin="5" />


12.             <Button Content="Stop" x:Name="stop" Click="stop_Click" Margin="5" />


13.             <Button Content="Mute" x:Name="mute" Click="mute_Click" Margin="5" />


14.             <Slider Grid.Row="1" x:Name="vol" Minimum="0" Maximum="1" ValueChanged="vol_ValueChanged" Margin="5" />


15.         </StackPanel>        


16.     </Grid>


17. </UserControl>

mainpage.xaml.cs

1. using System;


2. using System.Collections.Generic;


3. using System.Linq;


4. using System.Net;


5. using System.Windows;


6. using System.Windows.Controls;


7. using System.Windows.Documents;


8. using System.Windows.Input;


9. using System.Windows.Media;


10. using System.Windows.Media.Animation;


11. using System.Windows.Shapes;


12.  


13. namespace musicPlayer


14. {


15.     public partial class MainPage : UserControl


16.     {


17.         public MainPage()


18.         {


19.             InitializeComponent();


20.             vol.Value = media.Volume;


21.         }  


22.    


23.  


24.         private void play_Click(object sender, RoutedEventArgs e)


25.         {            


26.             media.Play();


27.         }


28.  


29.         private void vol_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)


30.         {


31.             media.Volume = vol.Value;


32.         }


33.  


34.         private void pause_Click(object sender, RoutedEventArgs e)


35.         {


36.             if (media.CanPause)


37.                 media.Pause();


38.         }


39.  


40.         private void stop_Click(object sender, RoutedEventArgs e)


41.         {


42.             media.Stop();


43.         }


44.  


45.         private void mute_Click(object sender, RoutedEventArgs e)


46.         {


47.             if (media.IsMuted == true)


48.             {


49.                 media.IsMuted = false;


50.             }


51.             else


52.             {


53.                 media.IsMuted = true;


54.             }


55.         }


56.     }


57. }

Silverlight 超入門 記錄1 Layout Control elements (Canvas)

silverlight 主要有三種Layout control element,分別是Canvas ,Grid 和 StackPanel.這裡暫時只介紹一下Canvas的用法,其他2個會在記錄2和3中後補

Canvas  -主要使用坐標來定義 Canvas本身的定位.

Grid      -主要使用類似表格(Table)利用橫行(rows)和直行(columns)來定義元素的位置,這方式最有彈性,同時是VS2008預建的顯示方法.

StackPanel  -將元素平均放成1行是平方和垂直方式來定位.

以下是VS2008 當我們開啟一個新的silverlight專案時所自動產生的代碼

<UserControl x:Class="dark6player.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">

  </Grid>
</UserControl>

我們可以看到VS2008 已經自動產生了一個Grid元素給我們並命名為LayoutRoot.

以下是幾個Canvas 的例子.

我們先不要理會上面的一堆宜告並在加入以下代碼:

<Canvas Width="480" Height="480" Background="blue">
    <Rectangle Canvas.Left="30" Canvas.Top="30"
       Fill="red" Width="200" Height="200" />
</Canvas>

效果:

我們定義了一個canvas和在裡面定義了一個rectangle,留意rectangle當中的Canvas.Left和Canvas.right對這個元素影響.

 

我們再加上多一些元素試看看我們再多加入一個canvas和rectangle到上面的例子:

<Canvas Width="480" Height="480" Background="blue">
    <Rectangle Canvas.Left="30" Canvas.Top="30"
       Fill="red" Width="200" Height="200" />
    <Canvas Width="320" Height="320" Background="Yellow" Canvas.Left="80" Canvas.Top="80">
    <Rectangle Canvas.Left="30" Canvas.Top="30"
       Fill="green" Width="200" Height="200" />
       </Canvas>
</Canvas>

 

效果:

我們所以看到同樣是同一個Canvas的child,比較後的會覆蓋比較前的,而已所有以canvas來定位的元素只會對自己上一個canvas對齊而不是根canvas.