BreadCrumb.xaml.csには public bool trigger; public int zindex; がいるだけです BreadCrumb.xaml <Grid VerticalAlignment="Center" Panel.ZIndex="{Binding zindex}"> <TextBlock x:Name="txt" VerticalAlignment="Center" Height="60" TextWrapping="Wrap" FontSize="20"> <TextBlock.Background> <VisualBrush> <VisualBrush.Visual> <Polygon x:Name="polygon" Fill="AliceBlue" Points="0,60 0,0 65,00 80,30 65,60" Stroke="#000000" /> </VisualBrush.Visual> </VisualBrush> </TextBlock.Background> <TextBlock.Resources> <Style x:Key="style" TargetType="Polygon"> <Style.Triggers> <DataTrigger Binding="{Binding trigger}" Value="true"> <Setter Property="Fill" Value="aqua"/> </DataTrigger> <DataTrigger Binding="{Binding trigger}" Value="false"> <Setter Property="Fill" Value="LightCyan"/> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Resources> </TextBlock> </Grid>
Control.xaml.cs List<string> str = new List<string> { "あいうえお", "かきくけこ", "あああああ", "あいうえお", "かきくけこ",.............}; double width = this.Width / str.Count; bool firstFlg = false; this.trigger = true; int zindex = str.Count; double mleft = width / 10; int i = str.Count-1; foreach(string msg in str){ if (!firstFlg) { BreadCrumbItems.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Auto) }); BreadCrumbControl breadControl = new BreadCrumbControl(); breadControl.txb.Width = width; breadControl.txb.Margin = new System.Windows.Thickness(0, 10, 0, 10); breadControl.txb.Text = msg ; breadControl.zindex = zindex; breadControl.trigger = this.trigger; breadControl.DataContext = breadControl; breadControl.SetValue(Grid.RowProperty, 0); breadControl.SetValue(Grid.ColumnProperty, i); BreadCrumbItems.Children.Add(breadControl); firstFlg = true; } else { BreadCrumbItems.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Auto) }); BreadCrumbControl breadControl = new BreadCrumbControl(); breadControl.txb.Width = width + (mleft * 2.5); breadControl.txb.Margin = new System.Windows.Thickness(0, 10, -(mleft * 2.5), 10); breadControl.txb.Text = msg ; breadControl.zindex = zindex; breadControl.trigger = this.trigger; breadControl.DataContext = breadControl; breadControl.SetValue(Grid.RowProperty, 0); breadControl.SetValue(Grid.ColumnProperty, i); BreadCrumbItems.Children.Add(breadControl); } zindex--; i--; } firstFlg = false; } Control.xaml <Grid Name="BreadCrumbItems" HorizontalAlignment="Stretch" VerticalAlignment="Center" ShowGridLines="True" > <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> </Grid>
やりたいことは画面の横幅いっぱいに図形を均等に並べて
そこにメッセージを載せてパンくずのようにしたいです。
メッセージリストは可変です。
分からないところ・つまっている箇所は
上記で一応横いっぱいに並べることはできているのですが、一番右の図形が少し小さくなってしまいます。
polygonで描写している図形を使い、頭がとんがっている部分だけを右に置かれた図形乗っけたいです。
本当は左から詰めたいのですがBreadCrumb.xamlで指定しているzindexが効かない。本当にここで使えるものかどうかがわからないです。。。
なので右から詰めています。bindingはちゃんと値を見れています。
<TextBlock.Resources>内の<DataTrigger Binding="{Binding trigger}" Value="true">も
bindingの値は見れていますが背景の色が変わらないです。
他に背景に図形を指定する方法、またはtriggerを動かすにはどうしたらいいでしょうか?
TextBlock内の文字が縦方向の真ん中に移動してくれません。
VerticalAlignment="Center"はTextBlockだ効かないのでしょうか?
図形をかぶせるために少し伸ばしてその分をmarginに指定して図形をずらしていますが
ouble mleft = width / 10;
breadControl.txb.Width = width + (mleft * 2.5);
breadControl.txb.Margin = new System.Windows.Thickness(0, 10, -(mleft * 2.5), 10);
のmleftですが [10]とか[2.5]適当に数字を指定しています。
この数字を左側の図形のとんがった部分と右の図形が重なった部分の幅にしたいです。
以上です。
特に解決したいのはメッセージの縦方向のセンター寄せとtriggerの部分です。
追記
回答ありがとうございます。
コード見にくくて申し訳ございません。
細かく教えていただきありがとうございます。
コードがスッキリしていて自分の汚いコードが恥ずかしいです。。。
図形を切り分けるという発想はありませんでした。
とういのも実は背景は固定の色で図形の枠の色を変えたかったというのがあり、
/こういうこと? //動的に変えたいならBindingにするか、triggerの値を変えるたびに手動で更新する breadControl.Fill = this.trigger ? Brushes.Aqua : Brushes.LightCyan;
の部分ですが図形の枠の色を変えるために
if (this.trigger) { breadControl.Style = TryFindResource("PolygonAStyle") as Style; } else { breadControl.Style = TryFindResource("PolygonBStyle") as Style; } リソース↓ *Bは枠の色を変えたもの <Style x:Key="PolygonAStyle" TargetType="{x:Type Polygon}"> <Setter Property="Fill" Value=" #FCC404"/> <Setter Property="Stroke" Value="#FF0000"/> </Style>
のようにして枠の色を変えたかったのです。
これを適用してしまうと枠の色が上書きされて三角の左の縦線部分が下図のようにでてきしまうと思うのですが
枠線の色を出しつつ縦線を出さずに”>”の部分だけ線を引くことは可能でしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/18 01:07