locked
LightSwitch | Silverlight DataGrid を LightSwitch DataGrid のようにスタイル化したい RRS feed

  • 質問

  • Silverlight と LightSwitch で DataGrid の見掛けが違います。

    どうやれば Silverlight の DataGrid を LightSwitch の DataGrid のように出来るのでしょう?




    想像では、
    適用されている Style そのものが違うということと、
    DataGrid を囲む Container とそのパーツも Xaml として違うのではないかと思っています。

    2012年3月27日 6:14

すべての返信

  • こんにちは。

    ControlTemplateをなんとかして、同じような感じにできないでしょうか。

    Silverlight

    DataGrid のスタイルとテンプレート http://msdn.microsoft.com/ja-jp/library/cc278066(VS.95).aspx

    Silverlight
    ControlTemplate を使用した既存のコントロールの外観のカスタマイズ http://msdn.microsoft.com/ja-jp/library/cc189093(VS.95).aspx
    2012年3月28日 3:03
  • Keiichi Oumi さん、情報有り難うございます。

    ControlTemplateをなんとかして、同じような感じにできないでしょうか。
    そういう手もあるのですね。

    Silverlight
    DataGrid のスタイルとテンプレート
    現 Silverlight DataGrid はこれで分かる、と。

    Silverlight
    ControlTemplate を使用した既存のコントロールの外観のカスタマイズ
    現 LightSwitch DataGrid の xaml と style が分かればいいのですが。
    そういう意味で以前 Silverlight の Inspector ないですかね?と質問していました。
    なさそうですね。

    2012年3月28日 11:36
  • こんにちは。

    実際に、LightSwitchでGridに対しどのようなXAMLが記述されているかは判らない(知らない)のですが、Extentionでテーマを追加すると、おそらくデフォルトの値だと思われるものを見られますが、これじゃ役にたたないですか?
    ListやGridのヘッダーで使っているカラー、GridAlternateRowBackground なんかも見当たります。

    これを元に、Silverlight側に値を設定してあげるとかでできないかなぁ・・・

    2012年3月30日 0:54
  • Keiichi Oumi さん、アドバイス有り難うございます。

    Extentionでテーマを追加すると、おそらくデフォルトの値だと思われるものを見られますが、これじゃ役にたたないですか?
    ん、それは知りませんでした。
    確認しています。



    2012年3月30日 1:43
  • Extentionでテーマを追加すると、おそらくデフォルトの値だと思われるものを見られます
    何処でその値を見れるのでしょう?
    LightSwitch Metro Theme をダウンロードして展開してみましたが、
    style などは見当たりません。

    2012年3月30日 1:58
  • こんにちは。

    LightSwitch Extention プロジェクトを作成した後、hoge.Lspkgプロジェクトに、新しい項目の追加でThemeを追加すると、hoge.clientプロジェクトに、Thems\Theme1.vb(cs) と Thems\Theme1.xaml が作成されるので、このxamlを見ると、<ResourceDictionary>下に、各種のデフォルト値がみられます。
    この中に、Grid関係の値もありますので、参考になると思います。
    (スタイルに関係するものだけですが・・)

    名前付きパーツがどのような構造になっているか等は解りません・・・

    2012年4月2日 0:20
  • 「Extentionでテーマを追加する」って、独自の theme の事だったのですね。
    勘違いしていました。
    確認してみます。
    情報有り難うございます。

    2012年4月2日 1:54
  •  11:    <!-- Control: Text Styles - Can be displayed on ScreenBackground, if not use FontBackgroundBrush -->
    109:    <!-- Control: Screen -->
    122:    <!-- Control: Button -->
    186:    <!-- Control: TextBox - The selected state is used for the color of selected text in the textbox. -->
    217:    <!-- Control: ComboBox/TextBox Button - In this case the 'Normal' state is displayed when the TextBox has focus or if another area of the TextBox is MouseOver -->
    251:    <!-- Control: Link -->
    262:    <!-- Control: Label -->
    270:    <!-- Control: CheckBox -->
    289:    <!-- Control: TabControl -->
    317:    <!-- Control: Toolbar - A toolbar can be used in any control that needs additional buttons or a header, like a List, Grid or future control -->
    365:    <!-- Control: ScrollBar -->
    409:    <!-- Control: List/Grid - The drag state appears when the column header is dragged, the Border is used for the drop position color -->
    442:    <!-- Control: Grid -->
    468:    <!-- Control: List -->
    489:    <!-- Control: Popup/Menu - Colors used either for popups, like combobox, or menus. -->
    518:    <!-- Control: Ribbon -->
    601:    <!-- Control: Navigation Menu -->
    663:    <!-- Control: ScreenTab -->
    685:    <!-- Control: Shell Component -->
    735:    <!-- Control: Validation Popup - The floating message that appears over a control when an error exists in the control. -->
    751:    <!-- Control: Screen Tab Validation - The control that appears at the top of a screen when validation errors occur. This has a header and a popup list of errors that can be clicked on. -->
    783:    <!-- Control: Modal Window -->
    799:    <!-- Control: Runtime Screen Designer -->

    List/Grid と Grid ですかね。


    <!-- Control: Grid -->
    <!-- States:  NormalBrush, MouseOverBrush, SelectedBrush, UnfocusedSelectedBrush, MouseOverSelectedBrush -->
    
    <!-- GridRowBackground - The background of a grid row -->
    <SolidColorBrush x:Key="GridRowBackgroundBrush" Color="White"/>
    <SolidColorBrush x:Key="GridRowBackgroundMouseOverBrush" Color="Transparent"/>
    <SolidColorBrush x:Key="GridRowBackgroundSelectedBrush" Color="#FFC4DCF7"/>
    <SolidColorBrush x:Key="GridRowBackgroundUnfocusedSelectedBrush" Color="#FFDDDDDD"/>
    <SolidColorBrush x:Key="GridRowBackgroundMouseOverSelectedBrush" Color="#FFC4DCF7"/>
    

    でも、こんなバラバラな設定を一つ一つ適用するのでしょうか?

    • 編集済み custar 2012年4月2日 2:30
    2012年4月2日 2:26
  • x:Key="NormalFontSize" を大きくし、
    Silverlight DataGrid を配置した結果が以下の通りです。





    変更できることは確認しました。
    でも、大変そうですね。
    2012年4月2日 2:58
  • こんにちは。
    良い例では無いかもしれませんが、普通に?テンプレートを定義して、いろいろいじってしまえば多少は(^^;楽かもしれません。
    以下は、DataGridの名前付きパーツの1つ「DataGridColumnHeader」をリソースに書いて触ったものです。
    HorizontalContentAlignment、Foreground、SeparatorBrushを変更しています。
    ヘッダーをペターんとした雰囲気にする場合は、VisualStatManager(VisualState)関係の各部を触ると良いと思います。
    BackgroundRectangleや、BackgroundGradientを触ることで、ペタ~んとした雰囲気にもなります。
    <vsm:VisualState x:Name="Normal" />にStoryBoardを書いても良いと思います。
    LightSwitchと雰囲気を合わせるのは大変ですが、一度やってしまえば・・・


    下記例ですと、カラムヘッダのバックが青で文字が赤になります。(ひどい色だ…)

    <UserControl x:Class="SilverlightApplication1.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"
    xmlns:vsm="http://schemas.microsoft.com/winfx/2006/xaml/presentation"           
    d:DesignHeight="300" d:DesignWidth="600" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:my="clr-namespace:SilverlightApplication1.ServiceReference1">
        <UserControl.Resources>
            <CollectionViewSource x:Key="CustomersViewSource" d:DesignSource="{d:DesignInstance my:Customer, CreateList=True}" />

            <Style TargetType="sdk:DataGridColumnHeader">
                <Setter Property="Foreground" Value="Red" />
                <Setter Property="HorizontalContentAlignment" Value="Center"  />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="IsTabStop" Value="False" />
                <!--<Setter Property="SeparatorBrush" Value="#FFC9CACA" />-->
                <Setter Property="SeparatorBrush" Value="Blue" />
                <Setter Property="Padding" Value="4" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="sdk:DataGridColumnHeader">
                            <Grid Name="Root">
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal">

                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#7FFFFFFF"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#CCFFFFFF"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#F2FFFFFF"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" To="#D8FFFFFF"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#C6FFFFFF"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#8CFFFFFF"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#3FFFFFFF"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup x:Name="SortStates">
                                        <vsm:VisualState x:Name="Unsorted" />
                                        <vsm:VisualState x:Name="SortAscending">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="SortDescending">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                                <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="0" To="-.9"/>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <!--<Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="#FF1F3B53" Grid.ColumnSpan="2" />-->
                                <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="Blue" Grid.ColumnSpan="2" />
                                <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2"  >
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                            <GradientStop Color="Blue" Offset="0.015" />
                                            <GradientStop Color="Blue" Offset="0.375" />
                                            <GradientStop Color="Blue" Offset="0.6" />
                                            <GradientStop Color="Blue" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>

                                <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <ContentPresenter Content="{TemplateBinding Content}"/>

                                    <Path Grid.Column="1" Name="SortIcon" Fill="#FF444444" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Stretch="Uniform" Width="8" Margin="4,0,0,0" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
                                        <Path.RenderTransform>
                                            <ScaleTransform ScaleX=".9" ScaleY=".9" />
                                        </Path.RenderTransform>
                                    </Path>
                                </Grid>

                                <Rectangle Name="VerticalSeparator" Grid.Column="1" Width="1" VerticalAlignment="Stretch" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}" />

                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </UserControl.Resources>

        <sdk:DataGrid AutoGenerateColumns="False" Height="200" ItemsSource="{Binding Source={StaticResource CustomersViewSource}}" Name="CustomersDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Width="400">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn x:Name="AddressColumn" Binding="{Binding Path=Address}" Header="Address" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="CityColumn" Binding="{Binding Path=City}" Header="City" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="CompanyNameColumn" Binding="{Binding Path=CompanyName}" Header="Company Name" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="ContactNameColumn" Binding="{Binding Path=ContactName}" Header="Contact Name" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="ContactTitleColumn" Binding="{Binding Path=ContactTitle}" Header="Contact Title" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="CountryColumn" Binding="{Binding Path=Country}" Header="Country" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="CustomerIDColumn" Binding="{Binding Path=CustomerID}" Header="Customer ID" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="FaxColumn" Binding="{Binding Path=Fax}" Header="Fax" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="PhoneColumn" Binding="{Binding Path=Phone}" Header="Phone" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="PostalCodeColumn" Binding="{Binding Path=PostalCode}" Header="Postal Code" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="RegionColumn" Binding="{Binding Path=Region}" Header="Region" Width="SizeToHeader" />
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </UserControl>

    2012年4月2日 6:24
  • こんな感じですね。





    大変だ。

    こんな時、Blend の出番はないのかな?
    私の技術レベルだと全く使いようのない Blend。
    • 編集済み custar 2012年4月2日 7:36
    2012年4月2日 7:36
  • こんにちは。

    Expression Blend 4 ですと、データグリッド上で右クリックして「追加テンプレートの編集」でしょうか。

    2012年4月4日 6:09
  • んんん、LightSwitch の Control を Blend にどうやって持っていけばいいのか不明なので、
    残念ながら行動に移していません。


    - XAML版Metroスタイルアプリにおける「Windows Phoneのテーマリソース」的なもの

    のように、現在適用中の Theme Resources を閲覧でき、Extension にも適用できたらいいのですけど。
    2012年4月6日 4:02
  • 以下の説明の中では、


    - Creating a LightSwitch Screen Template

    public class TestTemplate : IScreenTemplate
    {
    	#region IScreenTemplate Members
    
    	public void Generate(IScreenTemplateHost host)
    	{
    		...
    		host.SetContentItemView(primaryDataControl, "Microsoft.LightSwitch:DataGrid");


    のように書かれています。
    こうやって Screen Designer 上で DataGrid が挿入されるのでしょうが、
    "Microsoft.LightSwitch:DataGrid" の中身が分からない。


    Keiichi Oumi さんに助けてもらっていますが、簡単にできるようなことではなさそうですね。
    LightSwitch version 3 くらい先にならないと無理かも。
    2012年4月8日 8:30