Dyson's Notebook

2010年9月20日

Free Website Templates

這真的是造福大眾的網站，Free Website Templates 提供了免費的樣板，
包含圖檔、HTML 與 CSS，想設計網頁的人一定不能錯過。

CSS PX to EM Conversion

CSS 文字大小的設定方式有 px, em 與 % 三種，
px 較常見，不過是絕對單位，經常被建議不要使用。
em, % 是相對單位，相對於父物件之大小，使用時需要特別注意。

下列網站提供試算工具，可以幫助網友安排字體大小：PXtoEM.com

2010年9月16日

將 silverlight 設定為 windowless 雖然可以順利以 floating 方式顯示 HTML 區塊，卻會造成中文輸入法失效的問題。由於公司入選台灣微軟BizsparkCamp 雲端/ Silverlight創新徵選會，很榮幸能就此問題向章立民老師請教。
章老師提到，使用 windowless 不是一個恰當的做法，可能衍生的不只是中文輸入的問題，應避免使用。文件內容以資料庫或 xml 存放，並依照 HTML 或 Silverlight 的不同，來採取最恰當的顯示方法，才是最佳的處理方式。
章老師的答案，讓我覺得寫程式真的偷懶不得!!
前一篇 Embed HTML in Silverlight

CSS Horizontal List

如果要將列表改為橫向，可以使用下列的語法：
HTML

 


Item one
Item two
Item three
Item four
Item five

CSS

 
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

上列範例，節錄自：maxdesign

2010年9月2日

ASP.NET MVC

最近開始接觸 ASP.NET MVC，除了透過書籍學習外，微軟在網路上也準備了不錯的資訊與影片，我把相關的資訊列在下面：
Learn ASP.NET MVC (微軟 ASP.NET 官網)
ASP.NET MVC 2: Basics, Introduction by Scott Hanselman (很棒的影片，長度有七十多分鐘)
ASP.NET Routing Debugger (上項影片所提到的工具)

2010年5月19日

Embed HTML in Silverlight

最近處理 Silverlight 顯示 HTML 視窗的問題，
看到一篇文章，測試了五種不同的方法，
分別如下：

WebBrowser - 可以顯示, 但限定在 Out of Browser 的模式
RichTextBox - 無法顯示 HTML
HTML Host Control - 即在 Silverlight 上, 疊一個 position:absolute 的區塊或 ifarem
Liquid RichTextBox - 勉強可以, 有些 HTML 的語法無法呈現, 對中文的支援更糟
HtmlTextBox - 同樣是勉強可用

原始文章位置：http://www.cnblogs.com/Robin2005/archive/2010/05/18/1737887.html
其中 HTML Host Control 應該是相容性最不受限的方法，
但嚴格來說，這不能算是 Silverlight 所提供的功能。

下列class，可以輸入InnerHtml，來顯示 HTML 的內容
但記得在包含 Silverlight 的網頁上，加入 id 為 winContent 的 div
並將 Silverlight 物件設為 windowless。

    public partial class HtmlHostControl : UserControl
    {
        public string InnerHtml
        {
            get { return m_InnerHtml; }
            set
            {
                m_InnerHtml = value;
                if (m_DivIFrameHost != null)
                    m_DivIFrameHost.SetProperty("innerHTML", value);
            }
        }

        public HtmlHostControl()
        {
            InitializeComponent();
            SizeChanged += new SizeChangedEventHandler(HtmlHostControl_SizeChanged);
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }

        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            ResetHtmlHostPosition();
        }

        void HtmlHostControl_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            ResetHtmlHostPosition();
        }

        HtmlElement m_DivIFrameHost = null;
        string m_InnerHtml = "";

        public void Show()
        {
            if (m_DivIFrameHost == null)
            {
                HtmlDocument doc = HtmlPage.Document;
                m_DivIFrameHost = doc.GetElementById("winContent"); 
                m_DivIFrameHost.SetStyleAttribute("visibility", "visible");

                m_DivIFrameHost.SetProperty("innerHTML", "Hello");
            }

            ResetHtmlHostPosition();
        }

        private void ResetHtmlHostPosition()
        {
            if (m_DivIFrameHost != null)
            {
                GeneralTransform generalTransform = HtmlHostPanel.TransformToVisual(Application.Current.RootVisual);

                Point pos1 = generalTransform.Transform(new Point(0, 0));
                Point pos2 = generalTransform.Transform(new Point(HtmlHostPanel.ActualWidth, HtmlHostPanel.ActualHeight));

                m_DivIFrameHost.SetStyleAttribute("left", pos1.X.ToString() + "px");
                m_DivIFrameHost.SetStyleAttribute("top", pos1.Y.ToString() + "px");
                m_DivIFrameHost.SetStyleAttribute("width", (pos2.X - pos1.X).ToString() + "px");
                m_DivIFrameHost.SetStyleAttribute("height", (pos2.Y - pos1.Y).ToString() + "px");
            }
        }

        public void ReleaseAll()
        {
            CompositionTarget.Rendering -= CompositionTarget_Rendering;
            if (m_DivIFrameHost != null)
                m_DivIFrameHost.SetStyleAttribute("visibility", "hidden");
        }
    }

2010年4月29日

Silverlight AP 之 1 - 奇蜜相簿瀏覽工具

經過一段時間的開發，慢慢在奇蜜親子網增添了一些以 Silverlight 所開發的功能與服務。

由於網站原本就提供相簿服務，因此第一個便想到利用 Silverlight 的互動威力，來達成更好的瀏覽經驗。不同於一般網站，奇蜜親子網的相簿，分成了三層結構；最上層是分類，然後相簿，最後是相片。為了配合這個特殊結構，瀏覽介面做了特別的設計。

訪客可以點選這裡連結到下面截圖的實際位置，也請不吝於提供意見與指教。