I have a Template defined for Silverlight DataPager control with a CombboBox with PageSize values
Template:
<Style TargetType="sdk:DataPager">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataPager">
<Grid x:Name="Root" Background="Transparent">
<Border BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" MinHeight="24" Padding="{TemplateBinding Padding}" VerticalAlignment="Bottom">
<StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Orientation="Horizontal" VerticalAlignment="Stretch">
<Button x:Name="FirstPageButton" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" HorizontalAlignment="Right" Height="20" Padding="1" Template="{StaticResource ButtonTemplate}" VerticalAlignment="Center" Width="20" Margin="0,0,3,0">
<Grid Height="9" Width="8">
<Path Data="M0,1 L1,0 L1,2 Z" HorizontalAlignment="Right" Height="9" Stretch="Fill" Width="5" Fill="White"/>
<Rectangle HorizontalAlignment="Left" Width="2" Fill="White"/>
</Grid>
</Button>
<Button x:Name="PreviousPageButton" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" HorizontalAlignment="Right" Height="20" Padding="1" Template="{StaticResource ButtonTemplate}" VerticalAlignment="Center" Width="20" Margin="0,0,3,0">
<Path Data="M0,1 L1,0 L1,2 Z" HorizontalAlignment="Center" Height="9" Stretch="Fill" Width="5" Fill="White"/>
</Button>
<Border x:Name="Separator1" BorderThickness="1,0,1,0" Margin="0, 3" Width="1" BorderBrush="#FF747474"/>
<StackPanel x:Name="NumericButtonPanel" Margin="1" Orientation="Horizontal"/>
<StackPanel x:Name="PageSizeDisplay" Orientation="Horizontal">
<ComboBox SelectedValue="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PageSize, Mode=TwoWay}"
SelectedValuePath="Content" Width="60" Margin="3"
BorderBrush="{TemplateBinding BorderBrush}" Foreground="{TemplateBinding Foreground}">
<ComboBoxItem Content="10"></ComboBoxItem>
<ComboBoxItem Content="20" IsSelected="True"></ComboBoxItem>
<ComboBoxItem Content="50"></ComboBoxItem>
<ComboBoxItem Content="100"></ComboBoxItem>
<ComboBoxItem Content="200"></ComboBoxItem>
</ComboBox>
</StackPanel>
<StackPanel x:Name="PageDisplay" Orientation="Horizontal">
<TextBlock x:Name="CurrentPagePrefixTextBlock" Foreground="{TemplateBinding Foreground}" Margin="4,0,0,0" VerticalAlignment="Center" Width="Auto"/>
<TextBox x:Name="CurrentPageTextBox" BorderBrush="{TemplateBinding BorderBrush}" Foreground="{TemplateBinding Foreground}" Height="Auto" Margin="4,2,4,2" Style="{StaticResource TextBoxStyle1}" TextWrapping="Wrap" VerticalAlignment="Center" Width="40"/>
<TextBlock x:Name="CurrentPageSuffixTextBlock" Foreground="{TemplateBinding Foreground}" Margin="0,0,4,0" VerticalAlignment="Center" Width="Auto"/>
</StackPanel>
<Border x:Name="Separator2" BorderThickness="1,0,1,0" Margin="0,3" Width="1" BorderBrush="#FF747474"/>
<Button x:Name="NextPageButton" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" HorizontalAlignment="Right" Height="20" Padding="1" Template="{StaticResource ButtonTemplate}" VerticalAlignment="Center" Width="20" Margin="3,0">
<Path Data="M0,0 L1,1 L0,2 Z" HorizontalAlignment="Center" Height="9" Stretch="Fill" Width="5" Fill="White"/>
</Button>
<Button x:Name="LastPageButton" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" HorizontalAlignment="Right" Height="20" Padding="1" Template="{StaticResource ButtonTemplate}" VerticalAlignment="Center" Width="20">
<Grid Height="9" Width="8">
<Path Data="M0,0 L1,1 L0,2 Z" HorizontalAlignment="Left" Height="9" Stretch="Fill" Width="5" Fill="White"/>
<Rectangle HorizontalAlignment="Right" Width="2" Fill="White"/>
</Grid>
</Button>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage:
<sdk:DataPager x:Name="pager" Source="{Binding Path=ItemsSource, ElementName=myGrid}" PageSize="50" />
My DataGrid is bound to a PagedCollectionView, but still the PageSize ComboBox doesn't display the correct value. (if IsSelected property is not set, there is no selected item in the ComboBox)
I have also tried setting the PageSize property of the PagedCollectionView, that doesn't help either.
Any idea what am I doing wrong?
You are trying to bind ComboBoxItem values with int32 values.
try this instead:
<ComboBox SelectedValue="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PageSize, Mode=TwoWay}"
Width="60" Margin="3"
BorderBrush="{TemplateBinding BorderBrush}" Foreground="{TemplateBinding Foreground}">
<sys:Int32>10</sys:Int32>
<sys:Int32>20</sys:Int32>
<sys:Int32>50</sys:Int32>
Also add the following namespace:
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Related
I have RadComboBox. Like as :
<telerik:RadComboBox Grid.Row="4" Grid.Column="1" Name="truckComboBox" Width="280" Height="30" Margin="5,35,5,5" StaysOpenOnEdit="True"
IsSynchronizedWithCurrentItem="True" Template="{StaticResource RadComboBoxControlTemplate1}"
DisplayMemberPath="Description" EmptyText="Select" OpenDropDownOnFocus="True" HorizontalAlignment="Left"
ItemsSource="{Binding TrucksCV, UpdateSourceTrigger=PropertyChanged}" TextSearchMode="Contains" IsFilteringEnabled="True" IsEditable="True" SelectedValue="{Binding TechUserModel.TruckID, Mode=TwoWay}">
<telerik:RadComboBox.ItemContainerStyle>
<Style TargetType="{x:Type telerik:RadComboBoxItem}">
<Setter Property="FontSize" Value="18"></Setter>
<Setter Property="FontWeight" Value="SemiBold"></Setter>
</Style>
</telerik:RadComboBox.ItemContainerStyle>
</telerik:RadComboBox>
I want to increase height of arrow button and we are customize the template like as:
<ControlTemplate x:Key="RadComboBoxControlTemplate1" TargetType="{x:Type telerik:RadComboBox}">
<Grid x:Name="VisualRoot">
<Border Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False"/>
<telerik:RadToggleButton x:Name="PART_DropDownButton" ClickMode="Press" IsTabStop="False" Margin="0" Padding="0" Width="100">
<telerik:RadToggleButton.Template>
<ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Width="100"/>
</ControlTemplate>
</telerik:RadToggleButton.Template>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ButtonChrome" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDropDownOpen}" RenderFocused="{TemplateBinding IsFocused}" RenderEnabled="{TemplateBinding IsEnabled}" Width="100">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</Telerik_Windows_Controls_Chromes:ButtonChrome>
<ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
<ContentControl.Template>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Grid Margin="5,0">
<Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
<Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
</Grid>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</telerik:RadToggleButton>
</Grid>
</ControlTemplate>
But when we run application then RadComboBox does not showing any change why? Please provide need full solution of my question. thanks in advance.
I want to create a progressbar that looks like a cylinder in wpf, just like the following image (here it's made in winform) :
Can anyone show me how to do it, or maybe give me a trick? Thank you
You have to edit Template of progressbar for this.See Template of Progressbar
Edited Template/Style
<Window.Resources>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot">
<Border Margin="5,0,5,0" BorderThickness="0,1.2,0,1.2" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True" Background="{TemplateBinding Background}"/>
<Rectangle x:Name="PART_Track"/>
<Grid x:Name="PART_Indicator" ClipToBounds="True" HorizontalAlignment="Left">
<Grid x:Name="Indicator">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Margin="0,0,-3,0" Grid.Column="1" Fill="{TemplateBinding Foreground}" />
<Ellipse Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="8" Fill="{TemplateBinding Foreground}"/>
<Ellipse Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="10" Fill="{TemplateBinding Foreground}"/>
<Rectangle Margin="5,0,0,0" Fill="{TemplateBinding Foreground}"></Rectangle>
<Border Grid.Column="1" BorderBrush="{TemplateBinding BorderBrush}" Margin="-5,0,-2,0" BorderThickness="0,1,0,1"/>
</Grid>
<Grid x:Name="Animation">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Ellipse Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="8" Fill="{TemplateBinding Foreground}"/>
<Rectangle Grid.Column="1" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<ScaleTransform/>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<Grid Background="{TemplateBinding Foreground}">
<TextBlock Grid.ColumnSpan="2" Text="{Binding Path=Value,RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin=".5,.5" Foreground="Black">
<TextBlock.RenderTransform>
<RotateTransform Angle="90"></RotateTransform>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="10" Fill="{TemplateBinding Foreground}"/>
<Rectangle Margin="5,0,0,0" Fill="{TemplateBinding Foreground}"></Rectangle>
<Border Grid.Column="1" BorderBrush="{TemplateBinding BorderBrush}" Margin="-5,0,-2,0" BorderThickness="0,1,0,1"/>
</Grid>
</Grid>
<Ellipse HorizontalAlignment="Right" Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="8" Fill="{TemplateBinding Background}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="TemplateRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsIndeterminate" Value="True">
<Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<ProgressBar BorderThickness="1" BorderBrush="#95928A" SnapsToDevicePixels="True" Background="#E2E2E2" Foreground="#D4BC39" Margin="30" Width="30" IsIndeterminate="False" Orientation="Vertical" Minimum="0" Maximum="100" Value="30" Height="150" />
<ProgressBar BorderThickness="1" BorderBrush="#95928A" SnapsToDevicePixels="True" Background="#E2E2E2" Foreground="#D4BC39" Margin="30" Width="30" IsIndeterminate="False" Orientation="Vertical" Minimum="0" Maximum="100" Value="47.5" Height="150" />
<ProgressBar BorderThickness="1" BorderBrush="#95928A" SnapsToDevicePixels="True" Background="#E2E2E2" Foreground="#D4BC39" Margin="30" Width="30" IsIndeterminate="False" Orientation="Vertical" Minimum="0" Maximum="100" Value="75" Height="150" />
<ProgressBar BorderThickness="1" BorderBrush="#95928A" SnapsToDevicePixels="True" Background="#E2E2E2" Foreground="#D4BC39" Margin="30" Width="30" IsIndeterminate="False" Orientation="Vertical" Minimum="0" Maximum="100" Value="100" Height="150" />
</StackPanel>
Result
Visit this webpage.They do using windows form but the logic can be applied in wpf.
http://www.c-sharpcorner.com/UploadFile/johndouglas/ProgressarBarWithCylinderEffect11152005234729PM/ProgressarBarWithCylinderEffect.aspx
I have strange behaviour of my application. I display nine buttons in window but sometimes one or two buttons disappear. It isn't regular. Sometimes button contain one part(small rectangle or content).
App.xaml
<Application.Resources>
<Style TargetType="{x:Type Button}" x:Key="BiletButton1a">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="5" Color="Gray" Opacity="0.5"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="#E23817" HorizontalAlignment="Right" Height="133" Width="18"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}" x:Key="BiletButton1b">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="5" Color="Gray" Opacity="0.5"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="#E23817" HorizontalAlignment="Right" VerticalAlignment="Top" Height="67" Width="18"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}" x:Key="BiletButton2a">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="5" Color="Gray" Opacity="0.5"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="#239AD4" HorizontalAlignment="Right" Height="133" Width="18"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}" x:Key="BiletButton2b">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="5" Color="Gray" Opacity="0.5"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="#239AD4" HorizontalAlignment="Right" VerticalAlignment="Top" Height="67" Width="18"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Window1.xaml
<Button Style="{StaticResource BiletButton1a}" FontSize="30" HorizontalAlignment="Left" Margin="16,328,0,0" x:Name="button_ticket1a" Height="130" Width="226" Click="button_ticket1a_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Stretch" Name="tblock1a" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton1b}" FontSize="30" HorizontalAlignment="Left" Margin="16,492,0,0" x:Name="button_ticket1b" Height="130" Width="226" Click="button_ticket1b_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock1b" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2a}" FontSize="30" HorizontalAlignment="Left" Margin="267,330,0,0" x:Name="button_ticket2a" Height="130" Width="226" Click="button_ticket2a_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Stretch" Name="tblock2a" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2b}" FontSize="30" HorizontalAlignment="Left" Margin="267,492,0,0" x:Name="button_ticket2b" Height="130" Width="226" Click="button_ticket2b_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock2b" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2a}" FontSize="30" HorizontalAlignment="Left" Margin="521,330,0,0" x:Name="button_ticket3a" Height="130" Width="226" Click="button_ticket3a_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Stretch" Name="tblock3a" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2b}" FontSize="30" HorizontalAlignment="Left" Margin="521,492,0,0" x:Name="button_ticket3b" Height="130" Width="226" Click="button_ticket3b_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock3b" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2b}" FontSize="30" HorizontalAlignment="Left" Margin="267,654,0,0" x:Name="button_ticket2c" Height="130" Width="226" Click="button_ticket2c_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock2c" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2b}" FontSize="30" HorizontalAlignment="Left" Margin="521,654,0,0" x:Name="button_ticket3c" Height="130" Width="226" Click="button_ticket3c_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock3c" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton1b}" FontSize="30" HorizontalAlignment="Left" Margin="16,654,0,0" x:Name="button_ticket1c" Height="130" Width="226" Click="button_ticket1c_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock1c" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
</Grid>
So after few days learning WPF im trying to make custom style for my ComboBox. I want to set border with content width to fill all unused space between border and drop down button. After I fix this I will start with drop down list with items.
Result:
Code:
<Style TargetType="ComboBox">
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<DockPanel>
<Border x:Name="bg" BorderBrush="Yellow" Background="HotPink" BorderThickness="1" CornerRadius="0" DockPanel.Dock="Left">
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
</Border>
<Button x:Name="dropBtn" Width="20" DockPanel.Dock="Right" HorizontalAlignment="Right">
<Path VerticalAlignment="Center"
Width="10"
Height="8"
Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
Stretch="Fill"
Fill="HotPink"/>
</Button>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Move button before border in your DockPanel so that it becomes last child of your panel.
Then set LastChildFill to True on DockPanel.
<DockPanel LastChildFill="True">
<Button x:Name="dropBtn" Width="20" DockPanel.Dock="Right"
HorizontalAlignment="Right">
<Path VerticalAlignment="Center"
Width="10"
Height="8"
Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
Stretch="Fill"
Fill="HotPink"/>
</Button>
<Border x:Name="bg" BorderBrush="Yellow" Background="HotPink"
BorderThickness="1" CornerRadius="0" DockPanel.Dock="Left">
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
</Border>
</DockPanel>
As per documentation of LastChildFill:
Gets or sets a value that indicates whether the last child element
within a DockPanel stretches to fill the remaining available space.
I have a grid of TextBox inside a Border with the content binded like so
<Border BorderBrush="White" BorderThickness="1" Margin="0">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[0][0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Column="1">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[0][1], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Column="2">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[0][2], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="1" Grid.Column="0">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[1][0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="1" Grid.Column="1">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[1][1], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="1" Grid.Column="2">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[1][2], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="2" Grid.Column="0">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[2][0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="2" Grid.Column="1">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[2][1], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="2" Grid.Column="2">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[2][2], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
This is fine for a small grid, but there would a lot of copy pasting and replacing values for a big grid. Is there a better way to do this?
Easy solution, stop using those crazy TextArrays. Let's pretend you really do have an array like you are showing. Why not make your life easier?
Start with simplifying your data!
string[][] _Data = new[]
{
new string[] { "A", "B", "C" },
new string[] { "1", "2", "3" }
};
var _NewData =
from d in _Data
select new
{
One = d[0],
Two = d[1],
Three = d[2]
};
this.DataContext = _NewData;
Then you can simplify your XAML:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="600">
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Margin" Value="0" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="FontSize" Value="29.333" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- first record -->
<Border Grid.Column="0">
<TextBlock Text="{Binding One}" />
</Border>
<!-- second record -->
<Border Grid.Column="1">
<TextBlock Text="{Binding Two}" />
</Border>
<!-- third record -->
<Border Grid.Column="2">
<TextBlock Text="{Binding Three}" />
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Now there is ZERO redundancy. The XAML was meant to be used.
Best of luck!
Why not use, DataGrid for WinRT - there are alot of datagrid's available for WinRT from Third Party something like Syncfusion Offers you can check here.
http://darkcore.in/getting-started-in-syncfusions-datagrid-sfdatagrid-for-winrt/