Fluent.Ribbon buttons - c#

I'm somewhat new to WPF and .NET in general. I am using the Fluent.Ribbon library to create a ribbon for my application. I am also using the FontAwesome.Wpf library to draw icons on buttons and the like.
I am having trouble getting these to work nicely together, and I think it is due to how Fluent.Ribbon's button works.
If I write:
<Fluent:Button fa:Awesome.Content="Plus"
TextElement.FontFamily="pack://application:,,,/FontAwesome.WPF;component/#FontAwesome"
/>
I get "nothing" -- a blank button is "drawn." If I change it to using the standard WPF Button control, I get a button in the right place, using the right icon, but the style does not fit in with Fluent.Ribbon.
I want to just draw my font awesome icon in a nicely styled ribbon button. What should I do?

This is a little late but maybe interesting for others.
<Fluent:Button Size="Small" >
<Fluent:Button.Icon>
<fa:ImageAwesome Margin="0" Icon="Info" />
</Fluent:Button.Icon>
</Fluent:Button>
Setting the margin Property is only required when using the Icon in ToolBarItems.

Related

Opening a subwindow as part of the MainWindow

Overview
Hey everyone, I'm working on a project that is a C# WPF desktop app to create and edit a complex system. Simply think of it as and editor that can put together a full description of a car with all it's subcomponents.
I want each different component of the car to have a separate editor window. Like select the painting on the car and tada a sidewindow appears where you can fully customize the car's paint. Then when you click on the engine, that same sidewindow get's replaced by a new editor about the car's engine.
Question
How can I make that editor window that I already created with xaml and codebehind to appear as a part of the MainWindow, embedded as a sidebar?
If possible, I would avoid any 3rd party libraries, but if there is no other 'clean' way of doing it then I'm open to suggestions in that area as well.
I have fully functional windows that I created with the designer, wrote all the code for it to work, now I just have to find a way to embed those into the MainWindow on a press of a button.
Thanks for any answers
If you want something to "part of the MainWindow", you should not create another window because a Window cannot be a child of another element.
What you probably want to do is to move the XAML markup and code-behind from your current subwindow into a UserControl. You can then put the UserControl(s) into an appropriate Panel in your MainWindow.
For example, if you want UserControl to appear a sidebar in the window, you could use a DockPanel to dock it to the right:
<DockPanel>
<Border DockPanel.Dock="Right" Background="Yellow">
<local:SidebarUserControl Margin="10" />
</Border>
<TextBlock>main content...</TextBlock>
</DockPanel>

How to disable MaterialDesignInXaml Button animation?

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="..." />

Windows 8.1 control that opens the appbar?

In the Internet Explorer App, there is a little bar on the bottom that is used to open the app/command bar.
It also shows up in the mail app:
I have just a simple CommandBar at the moment, which is completely hidden until the user right-clicks or swipes from the bottom:
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="Button_Save" Icon="Save" Label="Save" Click="Button_Save_Click"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Crop" Label="Canvas Size"></AppBarButton>
<AppBarButton Label="Grid Size" Icon="ViewAll"></AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
Rather than just creating my own control, it would be nice if there was one that already existed for me to use. I don't know the name of this "Command bar grip" so I cant seem to find much information on it. If it does exist, what's the name of it? And if not, any ideas on how to make one? I would probably just use a rectangle and add the little "..." on the side.
I have seen it in some apps apart from Microsoft, but there appears to be no information on the control.
There isn't a standard control for this. The in-box AppBar on Windows 8.1 either hides or shows and doesn't have an intermediate hint mode.
You can implement it yourself by creating a panel at the bottom of the page animating its position so it is either fully visible or shows only the ellipses. This can be done fairly easily by setting visual states for the visible and hinting states and switching to the visible state when the control receives focus or pointer input. As Robert Hartley suggests, the ellipses can be found in the Segoe UI Symbol font at 0xE10C ("More")
<TextBlock Text="" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Segoe UI Symbol"/>
I haven't used it, but Dave Smits provided a sample AppBarHint control which implements a hinting app bar for Windows. You might want to take a look at how he did that too.

Change a section of a window upon click event

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)

How to stop an (InputScope = Number) textbox from disappearing when it gains focus?

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>

Categories