I am new in windows phone 7.
I am doing a sample for making a rounded corner button in silverlight for windows phone 7.
I achieved the rounded corners. But it is not showing the content of the button.
Whats wrong in my code ?.
Please help me.
now my button looks like this. No text in it.
I posted my code below.
Thanks.
MainPage.xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel VerticalAlignment="Center">
<Button Width="200" Height="80" Content="Click Me" Style="{StaticResource myCustomButtonStyle}" >
</Button>
</StackPanel>
</Grid>
ButtonResourceDictionary.xaml
<LinearGradientBrush x:Key="myCustomButtonColor" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF296180" Offset="0.589"/>
<GradientStop Color="#FF5BC0F3"/>
</LinearGradientBrush>
<Style x:Name="myCustomButtonStyle" TargetType="Button">
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="buttonBorder" Background="{StaticResource myCustomButtonColor}" CornerRadius="12"></Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to add a 'ContentPresenter' element into your template to display the content
Related
I am trying to accomplish the inner shadow in the following image.
It is a sort of sunken border looking shadow. I managed to come close with linear gradient fill but it needs some blur.
<Style TargetType="{x:Type local:LargeLabelWithUnitControl}">
<Setter Property="MaxHeight" Value="80"/>
<Setter Property="MinHeight" Value="80"/>
<Setter Property="MaxWidth" Value="130"/>
<Setter Property="MinWidth" Value="130"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:LargeLabelWithUnitControl}">
<Border BorderThickness="6" CornerRadius="15" >
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="10"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Display the LabelText -->
<TextBlock Text="{Binding LabelText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:LargeLabelWithUnitControl}}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
FontSize="50"
FontFamily="Calibri"/>
<!-- Display the UnitText -->
<TextBlock Text="{Binding UnitText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:LargeLabelWithUnitControl}}"
Grid.Row="1"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
FontSize="20"
FontFamily="Calibri"/>
</Grid>
</Border>
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0, 0" EndPoint="0.3, 0.8" >
<GradientStop Color="#ff095750" Offset="0.0"/>
<GradientStop Color="#ff148F7F" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Anyone knows how to do this?
So I have been on a quest to find a good answer to this very problem. So far there doesn't seem to be an easy or clean answer. This link here is good if your shape doesn't have rounded corners(or you want shading on all sides as seen in the rectangle example). https://www.codeproject.com/Articles/225076/Creating-Inner-Shadows-for-WPF-and-Silverlight
Though there doesn't seem to be a good solution for what you want. I have found something that works for my purposes, though it's not pretty in the slightest!
<Grid>
<Border Background="Yellow" Width="30" Height="30" Margin="-2" BorderThickness="2" CornerRadius="7" >
<!-- This blue border is hidden by the grey border -->
<Border Background="Transparent" BorderBrush="Blue" BorderThickness="1,1,0,0" CornerRadius ="5">
<Border.Effect>
<!-- This is where the actual inneshadow is defined -->
<DropShadowEffect ShadowDepth="0" BlurRadius="4" Color ="Red"/>
</Border.Effect>
</Border>
</Border>
<!-- Keeps blur radius from leaking out Normally it would be the color of the background -->
<Border BorderBrush="Green" Margin="-3" BorderThickness="3" CornerRadius="7" />
<!-- Grey border : If you want a borderless look I would recommend changing
this border to the background color as well or changing the size and
coverage of the green border -->
<Border BorderThickness="1" CornerRadius ="5" BorderBrush="Grey" />
</Grid>
Here is a link to the results https://imgur.com/zFh30jb, I added wacky colors so it should be clear which part is which. Again this is not a perfect solution and if anyone has anything better I would be interested. You will have to mess around with it a bit to get it to work for your purposes.
But I hope this helps someone out there!
I'm trying to add a context to an ellipse button but I do not know how I can accomplish it.
So far all what I can do is
<Ellipse Fill="{TemplateBinding Background}"/>
but I do not want a background, I want a text. If someone can help me in here that will help alot..
Here's the code:
<Button Grid.Column="0" Height="40" Width="40" Margin="-26,-10,26,10" FontWeight="Bold">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Ellipse/>
</ControlTemplate>
</Button.Template>
<Button.Content>
Meat
</Button.Content>
</Button>
If you can help to me, please copy and past the code with the answer:
<ControlTemplate TargetType="{x:Type Button}">
<Ellipse>
<ContentPresenter/>
</Ellipse>
</Grid>
I've created a custom progress bar as follows:
<!-- Custom progress bar -->
<Style
x:Key="CopyProgressBar"
TargetType="ProgressBar">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="ProgressBar">
<Grid>
<Border
x:Name="PART_Track"
CornerRadius="5"
BorderBrush="#BBC6C4"
BorderThickness="2" />
<Rectangle
x:Name="PART_Indicator"
Fill="#A5B2B0"
RadiusX="5"
RadiusY="5"
Margin="3"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here's how it is used:
<ProgressBar
x:Name="copyProgress"
Height="13"
Width="279"
Canvas.Left="158"
Canvas.Top="103"
Minimum="0"
Maximum="100"
Style="{StaticResource CopyProgressBar}" />
It works quite well, but when the progress is full, the right side of the fill bar is clipped, which removes the rounding styling I'm going for. I've fiddled with padding, margins, max width, etc, but I can't find a way to prevent the clipping.
Here is an image:
This was an interesting one to answer. I finally got it nailed down to being the margin that was causing the problem. The progress bar sets the width of PART_Indicator based on the width of PART_Track regardless of the margin or paddings that are set. The following style will get you the desired behaviour.
<Style x:Key="CopyProgressBar" TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="#BBC6C4" BorderThickness="1" CornerRadius="5" Padding="1">
<Grid x:Name="PART_Track" >
<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#A5B2B0" RadiusX="5" RadiusY="5"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My XAML code is like this:
<Window
xmlns ='http://schemas.microsoft.com/netfx/2007/xaml/presentation'
xmlns:x ='http://schemas.microsoft.com/winfx/2006/xaml'
Title ='Print Preview - More stuff here'
Height ='200'
Width ='300'
WindowStartupLocation ='CenterOwner'>
<DocumentViewer Name='dv1' ... />
</Window>
How can I, in XAML or in C#, eliminate the search box?
You can do something similar to Cheeso's answer with a style for ContentControl and a trigger to hide it when the name is PART_FindToolBarHost.
<DocumentViewer>
<DocumentViewer.Resources>
<Style TargetType="ContentControl">
<Style.Triggers>
<Trigger Property="Name" Value="PART_FindToolBarHost">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
</DocumentViewer.Resources>
</DocumentViewer>
Vlad's answer led me to look at how to programmatically grab the ContentControl that holds the find toolbar. I didn't really want to write an entirely new template for the DocumentViewer; I wanted to change (hide) only one control. That reduced the problem to how to retrieve a control that is applied via a template?.
Here's what I figured out:
Window window = ... ;
DocumentViewer dv1 = LogicalTreeHelper.FindLogicalNode(window, "dv1") as DocumentViewer;
ContentControl cc = dv1.Template.FindName("PART_FindToolBarHost", dv1) as ContentControl;
cc.Visibility = Visibility.Collapsed;
As Vlad pointed out you can replace the control template. Unfortunately, the control template available on MSDN is not the real control template used by the DocumentViewer control. Here is the correct template modified to hide the search bar by setting Visibility="Collapsed" on PART_FindToolBarHost:
<!-- DocumentViewer style with hidden search bar. -->
<Style TargetType="{x:Type DocumentViewer}" xmlns:Documents="clr-namespace:System.Windows.Documents;assembly=PresentationUI">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="ContextMenu" Value="{DynamicResource {ComponentResourceKey ResourceId=PUIDocumentViewerContextMenu, TypeInTargetAssembly={x:Type Documents:PresentationUIStyleResources}}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DocumentViewer}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Focusable="False">
<Grid Background="{TemplateBinding Background}" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentControl Grid.Column="0" Focusable="{TemplateBinding Focusable}" Grid.Row="0" Style="{DynamicResource {ComponentResourceKey ResourceId=PUIDocumentViewerToolBarStyleKey, TypeInTargetAssembly={x:Type Documents:PresentationUIStyleResources}}}" TabIndex="0"/>
<ScrollViewer x:Name="PART_ContentHost" CanContentScroll="true" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalScrollBarVisibility="Auto" IsTabStop="true" Grid.Row="1" TabIndex="1"/>
<DockPanel Grid.Row="1">
<FrameworkElement DockPanel.Dock="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Rectangle Height="10" Visibility="Visible" VerticalAlignment="top">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#66000000" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</DockPanel>
<ContentControl x:Name="PART_FindToolBarHost" Grid.Column="0" Focusable="{TemplateBinding Focusable}" Grid.Row="2" TabIndex="2" Visibility="Collapsed"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to add a reference to PresentationUI.dll. This assembly is located in the folder %WINDIR%\Microsoft.NET\Framework\v4.0.30319\WPF.
You can replace a control template for it. For your reference: the default DocumentViewer's control template is here: http://msdn.microsoft.com/en-us/library/aa970452.aspx
The search toolbar's name is PART_FindToolBarHost, so you can also just assign its Visibility to Collapsed.
Edit:
As the comment from #Martin suggests, the control template in MSDN (referenced above) is not fully correct. A better way to extract a template which is actually used in WPF by default would be using Blend (Edit Control Template in the context menu, if I am not mistaken).
In order to get Cheeso's answer to work in the constructor I had to add:
dv1.ApplyTemplate();
otherwise cc comes out null. See the answer here
<DocumentViewer>
<DocumentViewer.Resources>
<!-- Toolbar -->
<Style TargetType="ToolBar">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
<!-- Search -->
<Style TargetType="ContentControl">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</DocumentViewer.Resources>
</DocumentViewer>
Are you sure you need a DocumentViewer? You could use a FlowDocumentScrollViewer instead, or if you like pagination or multi-column display, you could use a FlowDocumentPageViewer.
I would like to apply a style on a WPF Expander Header. In the following XAML I have an Expander but the style is for all of it not just for the header.
Thanks.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640"
>
<StackPanel>
<StackPanel.Resources>
<Style TargetType="Expander">
<Style.Resources>
<LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#EF3132" Offset="0.1" />
<GradientStop Color="#D62B2B" Offset="0.9" />
</LinearGradientBrush>
</Style.Resources>
<Setter Property="Background" Value="{StaticResource BackBrush}"/>
</Style>
</StackPanel.Resources>
<Expander>
<StackPanel>
<TextBlock>Bike</TextBlock>
<TextBlock>Car</TextBlock>
<TextBlock>Truck</TextBlock>
</StackPanel>
</Expander>
</StackPanel>
</Page>
I have combined some XAML from Josh Smith and MSDN and came up with a solution. Indeed, the control (al least the header) must be retemplated.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400">
<StackPanel>
<StackPanel.Resources>
<Style TargetType="Border" x:Key="RacePitBorderStyle" >
<Style.Resources>
<LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#EF3132" Offset="0.1" />
<GradientStop Color="#D62B2B" Offset="0.9" />
</LinearGradientBrush>
</Style.Resources>
<Setter Property="Background" Value="{StaticResource BackBrush}"/>
</Style>
<DataTemplate x:Key="titleText">
<Border Style="{StaticResource RacePitBorderStyle}" Height="24">
<TextBlock Text="{Binding}"
Margin="4 0"
VerticalAlignment="Center"
Foreground="White"
FontSize="11"
FontWeight="Normal"
Width="{Binding
RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type Expander}},
Path=ActualWidth}"
TextWrapping="Wrap"/>
</Border>
</DataTemplate>
<Style TargetType="{x:Type Expander}">
<Setter Property="HeaderTemplate" Value="{StaticResource titleText}"/>
</Style>
</StackPanel.Resources>
<Expander Name="hcontCtrl" Header="This is the header.">
<StackPanel>
<TextBox>This is a textbox</TextBox>
<Button>A button</Button>
</StackPanel>
</Expander>
</StackPanel>
</Page>
I think Vasile's answer is on the right track, but it seems like it does a lot more than the original poster needed. All the original question was asking to do was to change the background of the header. While the change presented does do that, it also does other things.
One of these other things is to replace the default implementation, I believe a ContentPresenter, with a TextBlock. So what happens when later we change our Expander so that the header is more complicated? Maybe something like:
<Expander>
<Expander.Header>
<StackPanel>
<Border height="5" width="5" Foreground="Blue"/>
<TextBlock>Ha!</TextBlock>
</StackPanel>
</Expander.Header>
</Expander>
I don't know, but it's not good. Instead, I think we want to keep this simple.
<DataTemplate x:Key="expanderHeader">
<ContentPresenter
Content={Binding}
TextBlock.Background={StaticResource myBrush}/>
</DataTemplate>
<Style TargetType="Expander">
<Setter Property="HeaderTemplate" Value="{StaticResource expanderHeader}"/>
</Style>
That way when someone puts something that is not just text in our styled expander, we don't break. If you want to make sure you wrap the entirety of what they do with this background, which is probably desired, that would look like:
<DataTemplate x:Key="expanderHeader">
<Border Background={StaticResource myBrush}>
<ContentPresenter Content={Binding}/>
</Border>
</DataTemplate>
Depends what you want to style -- you can style any part of it. If you want to change the content in the header, just place all your UI in the Expander.Header property, and it'll show in the header area.
if that does't meet your needs, you probably need to re-template the control. Take a look at the control templates shipped in WPF here