I want to add a button above all column in Charts in the Silverlight Toolkit.
Same with this Picture:
I add style for DataPointStyle:
<Style x:Key="ColorByGradeColumn" TargetType="toolkit:ColumnDataPoint">
<Setter Property="Background" Value="DarkGray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ColumnDataPoint">
<Border
MouseEnter="Border_MouseEnter"
MouseLeave="Border_MouseLeave"
Background="{Binding Legend.Color,
Converter={StaticResource stringToSolidColorBrushConverter}}"
BorderThickness="0.5"
Tag="{Binding Legend}"
MouseLeftButtonUp="Col_MouseLeftButtonUp">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
but i don't know where i should add button.
You can add anything you need to the ControlTemplate.
In your case this would mean you have to add a Panel (e.g. a Grid) to arrange the button and the bar:
<ControlTemplate TargetType="toolkit:ColumnDataPoint">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" ... />
<Border Grid.Row="1" ... />
</Grid>
</ControlTemplate>
Related
I am using xceed busyindicator control and listbox with the very simple example. So i have background color of listbox set to black and when isbusy property of busyindicator is set to true. Listbox background color changes to white but for the rest of the control like grids background color remains the same. See example below. I want my listbox color to remain same as what i set but its changes to white when isBusy =true.
<Grid Margin="10">
<xctk:BusyIndicator IsBusy="True">
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="0.50*" />
<RowDefinition Height="0.50*" />
</Grid.RowDefinitions>
<ListBox Background="Black" Foreground="White">
<ListBoxItem>ListBox Item #1</ListBoxItem>
<ListBoxItem>ListBox Item #2</ListBoxItem>
<ListBoxItem>ListBox Item #3</ListBoxItem>
</ListBox>
</Grid>
</xctk:BusyIndicator>
</Grid>
The BusyIndicator has by default a semi-transparent Overlay. Also, it sets the underlying element's IsEnabled=False
You can achieve what you want like this:
<Grid Margin="10">
<Grid.Resources>
<Style x:Key="_BlackListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid Width="Auto" Height="Auto">
<Border x:Name="Border" CornerRadius="0,0,0,0" />
<ScrollViewer
Focusable="false"
HorizontalScrollBarVisibility="Disabled"
IsTabStop="False"
>
<StackPanel IsItemsHost="true" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0,0,0,0" />
</Style>
</Grid.Resources>
<xctk:BusyIndicator IsBusy="True">
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="0.50*" />
<RowDefinition Height="0.50*" />
</Grid.RowDefinitions>
<ListBox IsEnabled="False" Style="{StaticResource _BlackListBoxStyle}">
<ListBoxItem>ListBox Item #1</ListBoxItem>
<ListBoxItem>ListBox Item #2</ListBoxItem>
<ListBoxItem>ListBox Item #3</ListBoxItem>
</ListBox>
</Grid>
<xctk:BusyIndicator.OverlayStyle>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="Transparent" />
</Style>
</xctk:BusyIndicator.OverlayStyle>
</xctk:BusyIndicator>
</Grid>
I want to add a TextBox after the last item of a ListView (or at the bottom inside of the ItemsPresenter of a ListView).
At the moment I am defining a template for the last ListViewItem and I am using a converter to be sure which element is the last one.
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource LastItemInContainerConverter}}" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<StackPanel Orientation="Vertical">
<Border Name="Border" BorderBrush="#DCDCDC" Background="#eeeeec" BorderThickness="1" Margin="0,0,0,5">
<ContentPresenter />
</Border>
<TextBox>Hello!</TextBox>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
But the items are in a ObservableCollection and I am getting problems about the layout refreshing upon adding and removing items.
Any approach or idea how can I define that?
Ok, I find the solution.
<ListView.Template>
<ControlTemplate>
<Border>
<ScrollViewer>
<!-- this is needed -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<ItemsPresenter />
<TextBlock Grid.Row="1">Hello!!!</TextBlock>
</Grid>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListView.Template>
I am new to the WPF technology. Currently I am willing to apply master page concept in an WPF application.
I have used ResourceDictionary for the same. I am facing an issue while doing this as per below.
I want list of link buttons to be displayed on my Master page.
As there is no direct link button control available in the WPF I have found a style script used to create a link button as per below.
<Style x:Key="Link" TargetType="Button">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline"
Text="{TemplateBinding Content}"
Background="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now I have a button control used in the ResourceDictionary file and I am trying apply this style to the button control. It compiles successfully but runs with an exception message.
Below is my code of ResourceDictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MSRTC.Master">
<Style TargetType="{x:Type local:Master}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Master}">
<Grid Background="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="850"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="D:\Assignments\WPF\MSRTC\Developement\MSRTC\MSRTC\MSRTC\Images\Logo.png" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Image Source="D:\Assignments\WPF\MSRTC\Developement\MSRTC\MSRTC\MSRTC\Images\HeaderImage1.jpg" Grid.Column="1" Grid.Row="0" Stretch="Fill"/>
<Grid Grid.Row="1" Grid.Column="0" Background="Silver" Height="400">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Welcome" FontWeight="Bold" FontSize="15" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Button Name="btnHome" Content="Home" Grid.Row="1" Style="{StaticResource Link}"></Button>
</Grid>
<StackPanel Margin="10" Grid.Column="1" Grid.Row="1">
<!--<StackPanel Margin="10" Grid.Column="0" Grid.Row="1">-->
<ContentPresenter Content="{TemplateBinding Title}"/>
<ContentPresenter Content="{TemplateBinding Abstract}"/>
<ContentControl Content="{TemplateBinding Content}"/>
</StackPanel>
</Grid>
<!--<StackPanel Margin="10">
<ContentPresenter Content="{TemplateBinding Title}"/>
<ContentPresenter Content="{TemplateBinding Abstract}"/>
<ContentControl Content="{TemplateBinding Content}"/>
</StackPanel>-->
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Can anyone tell me where I am going wrong and how to takle with this.
Also one thing to be mention, the link button style script I have written in App.xaml Application.Resource section.
Thanks in advance.
I have the following style:
<Style TargetType="{x:Type local:MetroTabControl}">
<Style.Triggers>
<Trigger Property="SingleRow" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MetroTabControl}">
<Grid>
<Grid KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden" Style="{DynamicResource TabPanelScrollViewer}">
<TabPanel x:Name="HeaderPanel" IsItemsHost="True" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1"/>
</ScrollViewer>
<Button x:Name="AddTabItem" Content="" Style="{DynamicResource TabControlButton}" HorizontalAlignment="Right" VerticalAlignment="Top"/>
</Grid>
<Border Grid.Row="1" x:Name="TabPanelBorder" Background="Transparent">
<Rectangle x:Name="TabPanelBorderRectangle" Fill="{StaticResource TabPanelBorderBrush}" Height="2"/>
</Border>
<Border Grid.Row="2" Background="{StaticResource TabControlBackground}"/>
<ContentPresenter Grid.Row="2" Name="PART_SelectedContentHost" ContentSource="SelectedContent"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!--<Setter Property="Template" Value="{StaticResource MetroTabControlSingleRow}" />-->
</Trigger>
<Trigger Property="SingleRow" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MetroTabControl}">
<Grid KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Background="Transparent" BorderThickness="0,0,0,2" BorderBrush="{StaticResource TabPanelBorderBrush}">
<DockPanel LastChildFill="True">
<Button x:Name="AddTabItem" Style="{DynamicResource TabControlButton}" DockPanel.Dock="Right">
<Path Stroke="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Data="M0,4 H8 M4,0 V8" StrokeThickness="2" />
</Button>
<TabPanel x:Name="HeaderPanel" IsItemsHost="True" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1"/>
</DockPanel>
</Border>
<Border Grid.Row="1" Background="{StaticResource TabControlBackground}"/>
<ContentPresenter Grid.Row="1" Name="PART_SelectedContentHost" ContentSource="SelectedContent"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!--<Setter Property="Template" Value="{StaticResource MetroTabControlMultiRows}" />-->
</Trigger>
</Style.Triggers>
</Style>
I want to have another style, BasedOn the above, but with one change - I want to change the Fill Color of the TabPanelBorderRectangle Rectangle.
So, to use the BasedOn I wrote the following:
<Style TargetType="{x:Type local:MetroTabControl}" BasedOn="{StaticResource {x:Type local:MetroTabControl}}">
</Style>
But I have no Idea how to change the color of the TabPanelBorderRectangle Rectangle from the BasedOn Style.
I tried something like
<Setter TargetName="TabPanelBorderRectangle" Property="Fill" Value="Red"/>
but it doesnt work (TargetName property cannot be set on a Style Setter)
..
How can I do this?
As error states you cannot use TargetName in style setters.
As a workaround what you can do is, instead of using StaticResource for your brush, bind it using DynamicResource so that we can take advantage of resource look up behaviour of XAML.
<Rectangle x:Name="TabPanelBorderRectangle"
Fill="{DynamicResource TabPanelBorderBrush}"/>
Now, in your style you can override that brush by specifying the same key for a brush and provide your color value there.
<Style TargetType="{x:Type local:MetroTabControl}"
BasedOn="{StaticResource {x:Type local:MetroTabControl}}">
<Style.Resources>
<SolidColorBrush x:Key="TabPanelBorderBrush" Color="Green"/>
</Style.Resources>
</Style>
Since the brush is binded via dynamic resource it will pick the most local value from your style resource which will be Green in above case.
I need to show ListBox with dynamic content (so I do not know its height) and Button below it. So user should be able to scroll ListBox to end and see button.
In Android I would use RelativeLayout and below property for button or some other solution, but in WP I do not know how to do it.
What I had tryed:
1) Put all in StackPanel
<StackPanel>
<ListBox />
<Button />
</StackPanel>
This is not working, because StackPanel is blocking ListBox scrolling.
2) Ok, lets put ListBox in Grid
<StackPanel>
<Grid>
<ListBox />
</Grid>
<Button />
</StackPanel>
Nothing happens.
3) Put all in Grid and use Grid.Row not worked.
4) Lets put all in Grid and set margin for Button dynamically
<Grid>
<ListBox />
<Button />
</Grid>
Ok, this is working, but it is not good solution , because I need to handle ListBoxpopulating each time and reset margin for button. Bad bad bad.
P.S. Also, I can put button as ListBox item (not bad, but not good :)
Help me please...
If I understood you correctly, you need a simple Grid defined like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox />
<Button Grid.Row="1" Height="80"/>
</Grid>
By making height of the row zero to "star" and the first row to Auto, the ListBox will fill the remaining space, and the Button only 80 (you can change this to whatever you like). ListBox is automatically put to row zero because that's the default if it is not explicitly set.
If you don't want the button fixed on the page but to scroll with the ListBox, you could edit the ListBox template like this:
<Style x:Key="ListBoxWithButtonStyle" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ItemsPresenter/>
<Button Content="Touch me" Height="80" Grid.Row="1"/>
</Grid>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then apply to ListBox:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Style="{StaticResource ListBoxWithButtonStyle}">
</ListBox>
</Grid>