Can you recommend control or maybe an easy way to do this in WPF application. What I want is control that will collapse and expand itself on button press. It will be great if it looks like Win7 default one.
Here you are - Expander. Use IsExpanded property to change Expander's content visibility from code, or use built-in toggle button to change it interactively.
The read area is a header of Expander, the green area is a content of Expander.
To achieve the same behavior, you also need to set Expander.ExpandDirection property to Up value.
If you want to animate expanding, you'll need to add a trigger on IsExpanded = true an animation storyboard.
There is nothing in the framework itself to do precisely that, but it's easy to bend it your way.
You can use the Reveal control (from Bag of Tricks), and plant the toggle button that triggers the animation in the bottom bar.
Just copy/paste the control in your solution, then use it like this:
<local:Revealer IsExpanded="{Binding DetailsShown}">
<TextBlock Text="{Binding DetailInfoOne}" />
...
</local:Revealer>
And then at another location (bottom of your window?)
<ToggleButton Content="More details" IsChecked="{Binding DetailsShown}" />
Putting the arrow button and changing text to "Fewer details" is left as an exercise for the reader ;)
How about something like setting all your detailed info in a stack panel and put it to Visibility of Collapsed. When you push the button, set it to visible. The summary info is then set to collapsed and vice-versa.
The form will have to have a size set to Auto so that it will change depending of the content.
Hope that helps.
Related
I'm trying to create a button in WPF with MaterialDesignInXaml installed, without the animation when clicking it:
I've already looked through each property of the button and took a look at the buttons source code, but haven't found a solution.
The problem is, that the animation exceeds the rounded window.
I'm still quite on the beginner level of designing with xaml
Set the RippleAssist.Feedback attached property to Transparent:
<Button materialDesign:RippleAssist.Feedback="Transparent" Content="..." />
I have a treeview at the left side of the screen, and when I click on any of the TreeViewItem, I want the right side of the screen to change accordingly.
For example, clicking on 'Project' would display on the right half of the screen, a label for project name along with the project name in a text box, and a similar label-textbox pair for some other fields. Clicking on a sub-option of 'Project' such as 'Task 1' should change the right half of the screen such that instead of labels and textboxes for project name and details, it should now be for task name/details. Atm, I only care about label-textbox pairs but in the future I'll need some more sophisticated options, maybe buttons and tables.
What I thought of was to have a grid premade for each option, when I clicked on 'Project' there would be a grid which displays all the info for a Project. And when I then clicked on 'Task 1', the Project grid should be hidden and the Task grid should be displayed with the fields filled out.
Is this possible? What should I be using to create templates that I can then choose from?
Firoz already mentioned the important bit. A rough guess is that you're not using MVVM pattern, so to minimize the adaption effort, you could add a Content Control to your window and set the content of this control whenever a selection is made. You can put any User Control in there.
Using MVVM would mean you bind that Content Control to a property on your ViewModel (of type UIElement or UserControl) and set an instance whenever a bound selected values changes. Speaking of selected Value, I think the default TreeView is not really Binding-friendly, so you might end up with behaviours that do the binding for you.
What you are asking to do is quite easy and possible, but I don't think you are thinking quite big enough.
As your project grows and the number of different things that you want to show expands, then you are going to need to show and hide more and more controls. This is quite quickly going to get unmanageable. Instead think about some other controls deal with this, in some ways you are doing something very like a tabbed dialog, just with a hierarchical set of tabs.
A tabbed dialog has a panel and a set of tabs, when you click on each tab, the content of the panel changes. In fact you can create UserControls one for each specialised set of UI that you want to display, e.g. you could have a ProjectControl that displays all of your project textboxes, labels, buttons etc.
In addition WPF has this neat feature called DataTemplates, these define how a type of data should look when it is displayed. So if you where to have a
public class MyProject
{
public string Name {get;set;}
}
Then you could define
<DataTemplate DataType="{x:Type MyProject}>
<TextBox Text="{Binding Name}"/>
</DataTemplate>
And WPF will automatically convert the data into to its visual form if you set it as the content of the tab panel.
However this type of displaying content in a panel is not the only WPF control that does this. There is also something called a NavigationFrame, which also can be used wrapped into a Window as a NavigationWindow. This control provides you ways to navigate to the next Page to display. Pages can be just like the UserControls in a tabbed dialog, but can also be URIs, enabling you to link in content from the web if you wish. In addition you can call NavigateTo from other controls enabling you build much more usable interfaces.
I worked through the process of building a full windows control panel style interface in
http://alski.net/post/2012/01/11/WPF-Wizards.aspx
and http://alski.net/post/2012/01/13/WPF-Wizards-part-2-Glass.aspx
I've added later VS2012 style glows in
http://alski.net/post/2013/09/14/WPF-Re-creating-VS2012Office-2013-window-glow.aspx
And then released the entire source code as open source at
http://winchrome.codeplex.com/
This comes with support for embedding Navigation panels with
<WinChrome:SearchableNavigationWindow
x:Class="WinChrome.Win7Demo.MainWindow"
...
xmlns:WinChrome="clr-namespace:WinChrome;assembly=WinChrome"
Style="{StaticResource Win7NavigationWindow}">
<WinChrome:SearchableNavigationWindow.Navigation>
<view:Navigation x:Name="navigationTree"/>
</WinChrome:SearchableNavigationWindow.Navigation>
(Full source code)
Where the navigation window is embedded as, but can also be a TreeView.
<UserControl x:Class="WinChrome.View.Navigation" ...>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Padding="12,0"
VerticalScrollBarVisibility="Auto" >
<StackPanel>
<Button
Margin="0,12,0,0" Style="{StaticResource LinkNavigatorButtonStyle}"
Content="Home"
Command="{Binding
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Win7Demo:MainWindow}, AncestorLevel=1},
Path=GoHomeCommand}" />
</StackPanel>
</ScrollViewer>
(Full source code)
I am looking for a control that looks like a TextBox with an up and down button on the right hand side. As you click the buttons it should change the index of the selected item in the list. It should only show one item at a time. Hopefully this picture will better articulate what I am looking for:
I was hoping there was a way to style a ListBox or ComboBox to pull this off, but that does not seem possible. I considered using a slider, but my list of values may or may not have gaps, (i.e. it could be 150, 151,153,160,...).
I can get close with a ListBox by setting the height, but it does not change the SelectedIndex as you scroll:
<ListBox Height="23" Margin="5" VerticalAlignment="Center" HorizontalAlignment="Center">
<ListBoxItem>1</ListBoxItem>
<ListBoxItem>2</ListBoxItem>
<ListBoxItem>3</ListBoxItem>
<ListBoxItem>4</ListBoxItem>
<ListBoxItem>5</ListBoxItem>
</ListBox>
So is there away to hook into the scroll buttons so that when the buttons are clicked I can adjust the index appropriately? A secondary question would be, is there away to set the number of items to display in a `ListBox' before the scroll bars are added, instead of setting the height?
If you're using WinForms, there's a control for this purpose:
http://msdn.microsoft.com/en-us/library/system.windows.forms.numericupdown.aspx
For WPF, you may consider this one:
http://wpftoolkit.codeplex.com/wikipage?title=NumericUpDown&referringTitle=Home
Maybe you can use NumericUpDown control instead. and change the list index on ValueChanged event.
I have searched for other answers, but none are clear enough.
I have a problem where whenever I click on a textbox that I set the InputScope to "number", the number pad comes up but the box I was typing in disappears..
Here is a screenshot and my code.
(I am also overriding the light/dark theme on windows phone to do it)
<TextBox InputScope="Number" Height="72" HorizontalAlignment="Left"
Margin="159,190,0,0" Name="aTextBox" VerticalAlignment="Top" Width="227"
TextChanged="aTextBox_TextChanged" Foreground="Black" BorderThickness="0"
Background="White" />
Your problem appears to be that there is a different visual state for when the TextBox has input focus, which matches the phone theme you're trying to override. If you want to fight against the system theme, you'll need to retemplate the TextBox.
In Blend, in the Objects and Timeline window, right-click on the TextBox and select Edit Template | Edit a Copy...
In the dialog that appears, name your new style / template and where you want to create it in the XAML. Click OK.
You are now in template edit mode. (If you want to exit this mode, click the Return scope button at the top of the Objects and Timeline window)
Click on the States tab (or go to Window | States if not visible) and you can see all the different visual states for each mode of the TextBox (focused, unfocused, etc). As you click on each one, you'll see the TextBox in the designer change. Select each state and change the colors to what you want them to be.
Specifically, note how in the Focused state, the TextBox background becomes transparent by default. This is your issue. Change it to what you want it to be.
Finally, I want to recommend that you don't try to override the Light / Dark theme on Windows Phone, unless you are replacing it outright with your own branding / color scheme. It's a lot of work and it could annoy and confuse users who are used to seeing the theme they have chosen.
Good luck!
Try like this:
<TextBox Text="NumericTextBox">
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="Number" />
</InputScope>
</TextBox.InputScope>
I have a chat window where each message is a TextBlock. I want to be able to select the text inside my TextBlocks. Google says to use a TextBox instead, which I cannot do because they do not support runs, which I am using to create hyperlinks inside my messages. What options do I have?
Check out the RichTextBox implementation for WPF.
How about making an CustomContentControl with TextBox (with selection style) and a Link in it and play with visibility based on content. Some thing like
<myControls:CustomContentControl>
<Grid>
// play with visibilty depending on content.
<CustomLink/>
<TextBox Style="{StaticResource SelectionStyle}"/>
</Grid>
</myControls:ContentControl>