AvalonDockについて

作成中のアプリのサイドバーにExtenderコントロールでサブ情報を表示するようにしていたが、どうにも見た目が気に入らないのでIDEみたいなドッキングウィンドウ（？）にしてみたくて色々調べていると有名どころを見つけたので利用してみた。

１．インストール。


２．ソースコード
Windowのところに
「xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"」を追加しておいて、下記のようなソースを記載

            <xcad:DockingManager
                           AllowMixedOrientation="True"
                           BorderBrush="Black"
                           BorderThickness="1" >
                <xcad:DockingManager.DocumentHeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding IconSource}" Margin="0,0,4,0" Height="5" Width="5" MaxHeight="5" MaxWidth="5" Stretch="None" />
                            <TextBlock Text="{Binding Title}" />
                        </StackPanel>
                    </DataTemplate>
                </xcad:DockingManager.DocumentHeaderTemplate>
                <xcad:LayoutRoot x:Name="_layoutRoot">

                    <xcad:LayoutRoot.LeftSide>
                        <xcad:LayoutAnchorSide>
                            <xcad:LayoutAnchorGroup>
                                <xcad:LayoutAnchorable Title="プロジェクト" ContentId="Project" IconSource="images/document.png" CanClose="False" CanHide="False" >
                                    <StackPanel>
                                        <ItemsControl x:Name="tSxtack" ItemsSource="{Binding Projects}">
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel Orientation="Vertical">
                                                    </StackPanel>
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <DockPanel>
                                                        <Expander Style="{DynamicResource ExpanderCustomStyle}" >
                                                            <Expander.Header>
                                                                <StackPanel Orientation="Horizontal">
                                                                    <CheckBox Content="{Binding Name}" IsChecked="{Binding Showing}" ></CheckBox>
                                                                    <Button Name="btnProjectDetail" Content="..." Background="Transparent"  Width="25" BorderBrush="Silver"  BorderThickness="0.5" FontFamily="MS Gothic" Click="btnProjectDetail_Click"/>
                                                                </StackPanel>
                                                            </Expander.Header>
                                                            <StackPanel Margin="25,0,0,0" >
                                                                <TextBlock Text="{Binding StartDay,StringFormat=開始日：{0:yy/MM/dd}}"></TextBlock>
                                                                <TextBlock Text="{Binding EndDay,StringFormat=終了日：{0:yy/MM/dd}}"></TextBlock>
                                                                <TextBlock Text="{Binding Info}"></TextBlock>
                                                            </StackPanel>
                                                        </Expander>
                                                    </DockPanel>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </StackPanel>
                                </xcad:LayoutAnchorable>
                                <xcad:LayoutAnchorable x:Name="AvalondockDelayCard" Title="遅延カード" ContentId="DelayCardList" IconSource="images/document.png" CanClose="False" CanHide="False" >
                                    <ListView Name="lvLimitCardList" ItemsSource="{Binding DelayCardList}">
                                        <ListView.View>
                                            <GridView>
                                                <GridViewColumn Header="タイトル" Width="120" DisplayMemberBinding="{Binding CardTitle}" />
                                                <GridViewColumn Header="メンバー" Width="50" DisplayMemberBinding="{Binding Members}" />
                                            </GridView>
                                        </ListView.View>
                                        <ListView.GroupStyle>
                                            <GroupStyle>
                                                <GroupStyle.ContainerStyle>
                                                    <Style TargetType="{x:Type GroupItem}">
                                                        <Setter Property="Template">
                                                            <Setter.Value>
                                                                <ControlTemplate>
                                                                    <Expander IsExpanded="True" >
                                                                        <Expander.Header>
                                                                            <StackPanel Orientation="Horizontal">
                                                                                <!-- GroupItemのNameプロパティをバインド -->
                                                                                <TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="Gray" FontSize="22" VerticalAlignment="Bottom" />
                                                                                <TextBlock Text="{Binding ItemCount}" FontSize="22" Foreground="Green" FontWeight="Bold" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
                                                                                <TextBlock Text=" item(s)" FontSize="22" Foreground="Silver" FontStyle="Italic" VerticalAlignment="Bottom" />
                                                                            </StackPanel>
                                                                        </Expander.Header>
                                                                        <ItemsPresenter />
                                                                    </Expander>
                                                                </ControlTemplate>
                                                            </Setter.Value>
                                                        </Setter>
                                                    </Style>
                                                </GroupStyle.ContainerStyle>
                                            </GroupStyle>
                                        </ListView.GroupStyle>
                                    </ListView>
                                </xcad:LayoutAnchorable>
                            </xcad:LayoutAnchorGroup>
                        </xcad:LayoutAnchorSide>
                    </xcad:LayoutRoot.LeftSide>


                    <xcad:LayoutPanel Orientation="Horizontal">
                        <xcad:LayoutAnchorablePane DockWidth="200">
                            <xcad:LayoutAnchorable ContentId="MainWindow" Title="メイン画面" CanHide="False" CanClose="False" CanFloat="True" AutoHideWidth="240" CanAutoHide="False" IconSource="images/dokking.png">
                                <DockPanel>
                                    <ListView ItemsSource="{Binding CardLists,Mode=TwoWay}" ScrollViewer.VerticalScrollBarVisibility="Hidden" Style="{StaticResource NormalListView}">
                                        <ListView.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Horizontal"/>
                                            </ItemsPanelTemplate>
                                        </ListView.ItemsPanel>

                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <DockPanel Height="{Binding ActualHeight,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}">
                                                    <control:CardList Margin="10" CardChanged="CardList_CardChanged"
                                          PreviewMouseLeftButtonDown="CardList_PreviewMouseLeftButtonDown"
                                          PreviewMouseMove="CardList_PreviewMouseMove"
                                          PreviewMouseUp="CardList_PreviewMouseUp"
                                          PreviewDrop="CardList_PreviewDrop"
                                          AllowDrop="True"
                                          PreviewDragEnter="CardList_PreviewDragEnter"
                                          PreviewDragLeave="CardList_PreviewDragLeave"
                                          />
                                                </DockPanel>
                                            </DataTemplate>
                                        </ListView.ItemTemplate>
                                    </ListView>
                                </DockPanel>
                            </xcad:LayoutAnchorable>
                        </xcad:LayoutAnchorablePane>
                    </xcad:LayoutPanel>

                </xcad:LayoutRoot>
            </xcad:DockingManager>

３．結果


本当はDataGridとかもWPF Extended Toolkitにあるものを使おうかと思ったけど各機能の資料とかサンプルが見つけられなかったので早々に諦めた。

早く公開できるレベルまで仕上げたい・・・・！！

DataGridTextColumnの半角文字のフォントについて

いろいろと落ち着いてきたので作りかけのあれこれを修正中。
プログラムを作るのが数か月以上空いていたので、改めていろいろとみているとZipファイルに圧縮するよりもsqliteを使ったほうがいいんじゃないかと思い直して修正したり、いろいろとしてみた。

それはさておき、DataGridコントロールのDataGridTextColumnに半角文字をバインドしたときにフォントがにじんで見える現象があったので、いろいろと対処してみた。

＜修正前＞

＜修正後＞

個人的な趣味で「MS ゴシック」を採用したかったのでTextOptionsを変更して対応をした。

                    <DataGridTextColumn Header="開始日" Binding="{Binding StartDay,StringFormat={}yy/MM/dd}" Width="80">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="{x:Type TextBlock}" >
                                <Setter Property="TextAlignment" Value="Center" />
                                <Setter Property="TextOptions.TextFormattingMode" Value="Display" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>

TextOptions.TextFormattingModeを「Display」にすることで対応をした。
WindowのStyleでも設定してあるはずだが、上手く設定されなかった。

画面を拡大するとにじむ可能性があるが、そのことには今は目をつぶっておこうと思う。