the wpf extended toolkit has a BusyIndicator control and its possible to apply a template to the progress bar contained in that control.
i'm want the progress bar to be like the ring progress bar in win 8 (like here in code project http://www.codeproject.com/Articles/700185/Windows-Progress-Ring) but i can't apply a control, just a DataTemplate.
any ideas?
The BusyIndicator is designed as a content control. meaning it wraps the content you put inside and ads an overlay to it. you can create a ControlTemplate for it but you will have to make it something like this:
<Style TargetType="{x:Type xctk:BusyIndicator}" x:Key="ProgressRing">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xctk:BusyIndicator}">
<Grid>
<ContentControl Content="{TemplateBinding Content}"></ContentControl>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
x:Name="Overlay" Visibility="{TemplateBinding IsBusy, Converter={StaticResource BoolToVis}}">
<Border.Background>
<SolidColorBrush Color="Black" Opacity="0.5"></SolidColorBrush>
</Border.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">progress</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is similar to how the BusyIndicator is built but allows you to replace the progress bar it uses. simply replace the
BTW for the progress ring you can use an imageview and simply rotate it around it self infinitely.
Related
Originally I had a button and worked well. Now I want to make the corners round.
<Button Content="Start" x:Name="Start" Style="{StaticResource RoundButtonTemplate}"
HorizontalAlignment="Left"
Margin="20,20,0,0"
VerticalAlignment="Top"
Width="75"
Click="Start_Click">
In code behind, I set the background color as:
Start.IsEnabled = false;
Start.Background = Brushes.Red;
In App.xaml:
<Application.Resources>
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="15" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Now the questions are:
The background color is gone.
The borders of the button are invisible.
How to modify the style?
Have a look at the default style of a button http://msdn.microsoft.com/de-de/library/ms753328%28v=vs.110%29.aspx
In your style you define a "border" with a corner radius, but no way to retrieve the color. You should add a Background attribute with {TemplateBinding Background} so that it binds to the Background attribute of your button (Start.Background).
You can always copy the default style and modify it. Also you should have a look at how template bindings work :)
I've searched around quite a bit and can't seem to crack this nut.
I've got an app with a main view that changes dynamically, and to do this I use content presenter with a binding to a control:
<ScrollViewer Grid.Column="2" x:Name="StepScrollViewer">
<StackPanel Margin="20,20,20,500">
<ContentPresenter Content="{Binding MainControl}"/>
</StackPanel>
</ScrollViewer>
Then I change the MainControl at runtime in my view model. The problem is that the controls getting bound don't reliably display their error templates... I suspect it is for the reasons discussed here:
Validation ErrorTemplate not showing on data errors
But the fix for this problem doesn't seem to work for me because I'm not using a control template around my content presenter. When I wrap an AdornmentDecorator tag around my content presenter, it doesn't seem to fix the problem. It DOES work if I put an AdornmentDecorator inside each control I load into the contentpresenter (as the root element), but I'd like to avoid this repetition if possible.
Any insights?
UPDATE
I tried this approach suggested by Dennis, but to no avail. The control binds okay, but it works no better than the current approach (also shown commented below). Note: I tried it both with the AdornerDecorator as a singleton element the way Dennis has it, and surrounding the ContentPresenter, as shown below. Neither show any difference - the adorners around my controls all disappear when the MainControl binding is changed.
<UserControl.Resources>
<Style x:Key="MainContentControl" TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Grid>
<AdornerDecorator>
<ContentPresenter Content="{Binding MainControl}"/>
</AdornerDecorator>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
.....
<ScrollViewer Grid.Column="2" x:Name="StepScrollViewer">
<StackPanel Margin="20,20,20,500" >
<ContentControl Style="{StaticResource MainContentControl}"/>
</StackPanel>
</ScrollViewer>
<!-- THE BELOW WORKS IF I SURROUND EACH BOUND CONTROL WITH adornerdecorator -->
<ScrollViewer Grid.Column="2" x:Name="StepScrollViewer">
<StackPanel Margin="20,20,20,500">
<ContentPresenter Content="{Binding MainControl}"/>
</StackPanel>
</ScrollViewer>
-->
Instead of using a ContentPresenter directly, I would instead use a ContentControl. A ContentControl is the base class for controls that contain other elements and have a Content property, e.g. Button.
Then you can override the template to have an AdornerDecorator next to the ContentControl. This is different to what you previously tried as now the ContentPresenter is part of the same visual tree as the Adorner.
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit: Forgot that the AdornerDecorator needs to wrap the container, not just sit side-by-side.
I use regions with Prism. In the main window I have defined regions and in the region LeftNavigationRegion I inject a module which consist of basically a treeview. When the main region resizes I want a scrollbar from the treeview, but I instead get the scrollbar from the content control. This means that the header control in the treeview disappears. Does anyone know how to show the scrollbar of the treeview
XAML in main window...
<ContentControl x:Name="ActionContent"
cal:RegionManager.RegionName="{x:Static inf:RegionNames.LeftNavigationRegion}"
VerticalAlignment="Stretch">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}" />
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="false">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
You need to limit the size of the TreeView in some way. By default, it is probably being allowed to stretch to whatever size it needs, so the TreeView doesn't think it ever needs to scroll so don't show it's ScrollBars
You can do this by binding the Height/Width of the TreeView to your ContentControl's Height/Width. (If your outer ScrollViewer is inside the ContentControl, then bind to the it's Height/Width instead)
<TreeView Height="{Binding ElementName=ActionContent, Path=ActualHeight}"
Width="{Binding ElementName=ActionContent, Path=ActualWidth}">
Think i solved it, the problem was related to how i renderede the treeview columns, i was using a static Grid inside the style template of the treeview. When i realized that if i changed my custom treeview to a standard listview the scrolling worked. So i extracted the styles for the standard listview and made some changes to the treeview style and it worked, now the header for the treeview stays on top and the scrollbar for the treeview is shown instead of the scrollbar for the content control
In
<Style TargetType="{x:Type TreeView}".....
is added
<Border BorderThickness="{TemplateBinding Border.BorderThickness}" BorderBrush="{TemplateBinding Border.BorderBrush}" Name="Bd" SnapsToDevicePixels="True">
<ScrollViewer Style="{DynamicResource
{x:Static GridView.GridViewScrollViewerStyleKey}}">
<ItemsPresenter />
</ScrollViewer>
</Border>
for the control template. And in
<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="ScrollViewer">
I added
<ScrollViewer DockPanel.Dock="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
Focusable="false">
<GridViewHeaderRowPresenter Name="hrp" Columns="{StaticResource gvcc}"
ColumnHeaderContainerStyle=
"{StaticResource MyHeaderStyle}" />
</ScrollViewer>
So i can define my columns outside from style as treeview does not have .view property
Hope this helps someone and thanks Rachel for your efforts
i want to draw/add an image as a part of text in textbox in windows phone 7. I m not using Expression blend.
So where i can find the drawing objects as well as paint events in silverlight?
You can apply a background image to a lot of Silverlight elements with the following:
<TextBox x:Name="SearchBox" Text="Search" Height="70" Width="390">
<TextBox.Background>
<ImageBrush ImageSource="Images/MagnifyingGlass.png" Stretch="UniformToFill" />
</TextBox.Background>
</TextBox>
There is no way to add an image as part of a TextBox. Although I'm not entirely sure what you want to achieve.
Do you really mean TextBox? If so, the only option will be to restyle it so it have the image included as well.
Do you mean TextBlock? If so, and you're trying to include an image part way through a piece of text, you can wrap the image and the text either side of it in a WrapPanel.
You might want to override the template in order to define your own template. You can do this in the style:
<Style x:Key="textboxImage" TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="ApplicationIcon.png" />
</Grid.Background>
<ContentControl x:Name="ContentElement" Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You just need to set the style of your textbox to StaticResources textboxImage.
I just tested and it works fine.
Please bear with me Silverlight Designer Gurus, this is compicated (to me).
I'm creating a custom control which derives form the Silverlight 3.0 ListBox. In an effort not to show tons of code (initially), let me describe the setup.
I have a class library containing a class for my control logic. Then I have a Themes/generic.xaml that holds the styling details. In generic.xaml, I have a style that defines the default layout and look for the ListBox where I'm setting a values for the Template, ItemsPanel and ItemTemplate.
In my test app, I add my control on to MainPage.xaml and run it and it works great. I dynamically bind data to my control and that works fine.
Now I want to set the ItemContainerStyle for my derived control. If I create a style in the MainPage.xaml file and set the ItemContainerStyle property to that control as in:
<dti:myControl x:Name="MyControl1" ItemContainerStyle="{StaticResource MyListBoxItem}"
Height="500"
Width="200"
Margin="10"
Background="AliceBlue"
/>
It works as expected.
However, I'd like to do this in the class library or, more specifically, in generic.xaml. I tried to this Setter to my current Style:
<Setter Property="ItemContainerStyle">
<Setter.Value>
<ControlTemplate>
<Grid Background="Red" Margin="3">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="Stretch" Margin="3"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
And it fails miserably with:
"System.ArgumentException: 'System.Windows.Controls.ControlTemplate' is not a valid value for property 'ItemContainerStyle'."
Note: This is not my actual style I'd like to use for ItemContainerStyle. I'm actually looking to plug in some VSM here for the various selected/unselected states of the a ListBoxItem (for a dynamically bound control).
So, to the question is how do I apply the ItemContainterStyle to my custom control when it's defined using generic.xaml? I do not want that property set when I actually use the control later on.
Thanks,
Beaudetious
You missed to put Style tag inside your Setter.Value. ItemContainerstyle explects a Style to ListBoxItem(Unless you subclassed ListBoxItem to your own derived version.)
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType=”{x:Type ListBoxItem}“ >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="Red" Margin="3">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Stretch" Margin="3"/>
</Grid>
</ControlTemplate>
<Setter.Value>
</Style>
</Setter.Value>