I am building a WPF Navbar using Radio buttons and want to implement different icons for the different menus, instead of Text. As seen in the screenshot, the selected menu should be highlighted, which means changing the rectangle in the background to a different color, as well as the icon.
I currently have it working, that the colors are changed when selected, however I cannot figure out how to have different icons in each menu.
Screenshot of current implementation
My resource dictionary:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style BasedOn="{StaticResource {x:Type ToggleButton}}"
TargetType="{x:Type RadioButton}"
x:Key="MenuButtonTheme">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<BulletDecorator Background="White" Cursor="Hand">
<BulletDecorator.Bullet>
<Grid Height="16" Width="16">
<Canvas Name="g12">
<Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="14" Canvas.Top="6" Width="46" Height="45" RadiusX="14" RadiusY="14" Name="rect10" Fill="#FFF"/>
</Canvas>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg298" Width="75" Height="73">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path277" Fill="#5F6388" Data="M47.32 25.55L45.43 24.92L46.32 23.14C46.4102 22.9537 46.4404 22.744 46.4064 22.5398C46.3723 22.3356 46.2758 22.147 46.13 22L44 19.87C43.8522 19.7221 43.6618 19.6242 43.4555 19.5901C43.2493 19.556 43.0375 19.5875 42.85 19.68L41.07 20.57L40.44 18.68C40.3735 18.483 40.2472 18.3116 40.0787 18.1898C39.9102 18.0679 39.7079 18.0015 39.5 18H36.5C36.2904 17.9995 36.0858 18.0648 35.9154 18.1868C35.7449 18.3089 35.6171 18.4814 35.55 18.68L34.92 20.57L33.14 19.68C32.9537 19.5898 32.744 19.5596 32.5398 19.5936C32.3356 19.6277 32.147 19.7242 32 19.87L29.87 22C29.7221 22.1478 29.6242 22.3382 29.5901 22.5445C29.556 22.7507 29.5875 22.9625 29.68 23.15L30.57 24.93L28.68 25.56C28.483 25.6265 28.3116 25.7528 28.1898 25.9213C28.0679 26.0898 28.0015 26.2921 28 26.5V29.5C27.9995 29.7096 28.0648 29.9142 28.1868 30.0846C28.3089 30.2551 28.4814 30.3829 28.68 30.45L30.57 31.08L29.68 32.86C29.5898 33.0463 29.5596 33.256 29.5936 33.4602C29.6277 33.6644 29.7242 33.853 29.87 34L32 36.13C32.1478 36.2779 32.3382 36.3758 32.5445 36.4099C32.7507 36.444 32.9625 36.4125 33.15 36.32L34.93 35.43L35.56 37.32C35.6271 37.5186 35.7549 37.6911 35.9254 37.8132C36.0958 37.9352 36.3004 38.0005 36.51 38H39.51C39.7196 38.0005 39.9242 37.9352 40.0946 37.8132C40.2651 37.6911 40.3929 37.5186 40.46 37.32L41.09 35.43L42.87 36.32C43.0551 36.4079 43.2628 36.4369 43.4649 36.4029C43.667 36.3689 43.8538 36.2737 44 36.13L46.13 34C46.2779 33.8522 46.3758 33.6618 46.4099 33.4555C46.444 33.2493 46.4125 33.0375 46.32 32.85L45.43 31.07L47.32 30.44C47.517 30.3735 47.6884 30.2472 47.8103 30.0787C47.9321 29.9102 47.9985 29.7079 48 29.5V26.5C48.0005 26.2904 47.9352 26.0858 47.8132 25.9154C47.6911 25.7449 47.5186 25.6171 47.32 25.55ZM46 28.78L44.8 29.18C44.5241 29.2695 44.2709 29.418 44.0581 29.6151C43.8452 29.8122 43.6778 30.0533 43.5675 30.3216C43.4571 30.5899 43.4064 30.879 43.419 31.1688C43.4315 31.4586 43.5069 31.7422 43.64 32L44.21 33.14L43.11 34.24L42 33.64C41.7436 33.5122 41.4627 33.4411 41.1763 33.4313C40.89 33.4215 40.6049 33.4734 40.3403 33.5834C40.0758 33.6934 39.8379 33.8589 39.6429 34.0688C39.4479 34.2787 39.3003 34.5281 39.21 34.8L38.81 36H37.22L36.82 34.8C36.7305 34.5241 36.582 34.2709 36.3849 34.0581C36.1878 33.8452 35.9467 33.6778 35.6784 33.5675C35.4101 33.4571 35.1211 33.4064 34.8312 33.419C34.5414 33.4315 34.2578 33.5069 34 33.64L32.86 34.21L31.76 33.11L32.36 32C32.4931 31.7422 32.5685 31.4586 32.581 31.1688C32.5936 30.879 32.5429 30.5899 32.4325 30.3216C32.3222 30.0533 32.1548 29.8122 31.9419 29.6151C31.7291 29.418 31.4759 29.2695 31.2 29.18L30 28.78V27.22L31.2 26.82C31.4759 26.7305 31.7291 26.582 31.9419 26.3849C32.1548 26.1878 32.3222 25.9467 32.4325 25.6784C32.5429 25.4101 32.5936 25.1211 32.581 24.8312C32.5685 24.5414 32.4931 24.2578 32.36 24L31.79 22.89L32.89 21.79L34 22.36C34.2578 22.4931 34.5414 22.5685 34.8312 22.581C35.1211 22.5936 35.4101 22.5429 35.6784 22.4325C35.9467 22.3222 36.1878 22.1548 36.3849 21.9419C36.582 21.7291 36.7305 21.4759 36.82 21.2L37.22 20H38.78L39.18 21.2C39.2695 21.4759 39.418 21.7291 39.6151 21.9419C39.8122 22.1548 40.0533 22.3222 40.3216 22.4325C40.5899 22.5429 40.879 22.5936 41.1688 22.581C41.4586 22.5685 41.7422 22.4931 42 22.36L43.14 21.79L44.24 22.89L43.64 24C43.5122 24.2564 43.4411 24.5373 43.4313 24.8237C43.4215 25.11 43.4734 25.3951 43.5834 25.6597C43.6934 25.9242 43.8589 26.1621 44.0688 26.3571C44.2787 26.5521 44.5281 26.6997 44.8 26.79L46 27.19V28.78ZM38 24C37.2089 24 36.4355 24.2346 35.7777 24.6741C35.1199 25.1137 34.6072 25.7384 34.3045 26.4693C34.0017 27.2002 33.9225 28.0044 34.0769 28.7804C34.2312 29.5563 34.6122 30.269 35.1716 30.8284C35.731 31.3878 36.4437 31.7688 37.2196 31.9231C37.9956 32.0775 38.7998 31.9983 39.5307 31.6955C40.2616 31.3928 40.8864 30.8801 41.3259 30.2223C41.7654 29.5645 42 28.7911 42 28C42 26.9391 41.5786 25.9217 40.8284 25.1716C40.0783 24.4214 39.0609 24 38 24ZM38 30C37.6044 30 37.2178 29.8827 36.8889 29.6629C36.56 29.4432 36.3036 29.1308 36.1522 28.7654C36.0009 28.3999 35.9613 27.9978 36.0384 27.6098C36.1156 27.2219 36.3061 26.8655 36.5858 26.5858C36.8655 26.3061 37.2219 26.1156 37.6098 26.0384C37.9978 25.9613 38.3999 26.0009 38.7654 26.1522C39.1308 26.3036 39.4432 26.56 39.6629 26.8889C39.8827 27.2178 40 27.6044 40 28C40 28.5304 39.7893 29.0391 39.4142 29.4142C39.0391 29.7893 38.5304 30 38 30Z"/>
</Canvas>
</Grid>
</BulletDecorator.Bullet>
</BulletDecorator>
<!--If item is checked, trigger the visibility of the mark-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<!--If item is checked, trigger the visibility of the mark and change the color of the selected bullet into a darker gray for better highlighting-->
<Setter TargetName="rect10" Property="Fill" Value="#FF5051F9"/>
<Setter TargetName="path277" Property="Fill" Value="#FFF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My Radio Buttons:
<StackPanel Grid.Row="1" Margin="0,0,0,60"
VerticalAlignment="Center">
<RadioButton Style="{StaticResource MenuButtonTheme}"
Margin="0, 0,0, 0"
FontSize="14"
Command="{Binding NavigateCommand}"
CommandParameter="HomeView"
IsChecked="True"
Height="70">
</RadioButton>
<RadioButton Style="{StaticResource MenuButtonTheme}"
Margin="0, 0,0, 0"
FontSize="14"
Command="{Binding NavigateCommand}"
CommandParameter="TimelineView"
Height="70">
</RadioButton>
<RadioButton Style="{StaticResource MenuButtonTheme}"
Margin="0, 0,0, 0"
FontSize="14"
Command="{Binding NavigateCommand}"
CommandParameter="SettingsView"
Height="70">
</RadioButton>
</StackPanel>
Related
I have a Vanilla Nativescript app that I am testing a RadListView on; populating the items from JS.
As soon as I SET the value of the ObservableArray the app just crashes. I have tried to set the value onload as well as on tap. In this example tab on the BOTTOM LABEL; at the moment a label at the top will display the set value so I know that the object does exist; but when trying to bind the data to the list view things go awry.
Below is the base code to replicate this issue; if you uncomment the line:
pageData.set("items", items);
Any direction would be much appreciated.
HOME-PAGE.XML
<Page class="page"
navigatingTo="onNavigatingTo"
loaded="pageLoaded"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:lv="nativescript-ui-listview"
>
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<StackLayout>
<!-- Add your page content here -->
<Label text="{{ toptext }}" textAlignment="center" color="#88f" fontSize="15" fontWeight="bold"/>
<lv:RadListView height="350" items="{{ items }}" >
<lv:RadListView.itemTemplate>
<StackLayout orientation="vertical">
<Label fontSize="20" text="{{ itemName }}"/>
<Label fontSize="14" text="{{ itemDescription }}"/>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
<Label text="BOTTOM LABEL" textAlignment="center" color="#f88" fontSize="33" fontWeight="bold" onTap="fillListview"/>
</StackLayout>
</Page>
HOME-PAGE.JS
const HomeViewModel = require("./home-view-model");
var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var items = new ObservableArray();
var pageData = new Observable();
function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = new HomeViewModel();
}
exports.onNavigatingTo = onNavigatingTo;
exports.pageLoaded = function(args) {
page = args.object;
page.bindingContext = pageData;
items.push(
{
itemName: "$USD / ZAR",
itemDescription: "13.50",
itemDate: "3 Jul 2019",
itemImage: "~/images/arcade-fire.png"
},
{
itemName: "$USD / ZAR",
itemDescription: "18.00",
itemDate: "17 Aug 2019",
itemImage: "~/images/bon-iver.png"
}
)
};
exports.fillListview = function(args) {
pageData.set("toptext", items);
// pageData.set("items", items);
}
i tried to reproduce your problem in a playground project but all works fine, do you recive some error in console about your problem ??
Here is the project where i was trying your code
I'm creating a Line chart which includes more than 30 lines. Since it is difficult to identify the series by color I want to display a tooltip when the mouse pointer is on a series that displaying only series title. Is there any way to do that without using custom tooltip approach?
I followed https://lvcharts.net/App/examples/v1/wpf/Tooltips%20and%20Legends article.
Without going to custom tooltip implementation, I would like to try its 3rd example :
<lvc:CartesianChart>
<lvc:CartesianChart.Resources>
<Style TargetType="lvc:DefaultTooltip">
<Setter Property="Background" Value="DarkOrange"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="ShowTitle" Value="True"></Setter><!--new property-->
<Setter Property="ShowSeries" Value="False"></Setter><!--new property-->
<Setter Property="FontSize" Value="16"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="CornerRadius" Value="20"></Setter>
<Setter Property="Width" Value="40"></Setter>
<Setter Property="Height" Value="40"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
</Style>
</lvc:CartesianChart.Resources>
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="4,2,6,4"></lvc:LineSeries>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
The SeiesCollection is like below:
SeriesCollection = new SeriesCollection
{
new LineSeries
{
Title = "Series 1",
Values = new ChartValues<double> { 4, 6, 5, 2 ,4 }
PointGeometry = null
},
new LineSeries
{
Title = "Series 2",
Values = new ChartValues<double> { 6, 7, 3, 4 ,6 },
PointGeometry = null
},
};
In my code, <Setter Property="ShowTitle" Value="True"></Setter> is not working.
I want to see Series 1, Series 2 ... etc on the tooltip when the mouse pointer is on a line series.
With the LiveChart tooltip i've learned that, some way or another, one day you'll have to show something unavailable in the original implementation of the tooltip, and you'll have to implement the custom tooltip. So, even if there may be a clunky workaround to get what you need right now, better start implementing the custom tooltip and be ready for any future change.
I am developing window phone 7 application in C#. I am new to the window phone 7 application. I am also new to the silverlight. I want to generate the bold text of Texblock dynamically. I want to generate the bold text only for some part of the text. I am using the following code
IncometextBlock.Text = "Income entries on " + selectedDate.ToShortDateString() + " Page - "+SelectedButtonName+"";
I want the output as
"Income entries on 21/01/2011 Page - A"
I want the above output. How to make the bold text for above requirement ? Can you please provide me any code or link through which I can resolve the above issue. If I am doing anything wrong then please guide me.
I'd do it like this.
IncometextBlock.Inlines.Clear();
IncometextBlock.Inlines.Add(new Run() {Text = "Income entries", FontWeight = FontWeights.Bold});
IncometextBlock.Inlines.Add(new Run() {Text = " on " });
IncometextBlock.Inlines.Add(new Run() {Text = selectedDate.ToShortDateString(), FontWeight = FontWeights.Bold});
IncometextBlock.Inlines.Add(new Run() {Text = " Page - "});
IncometextBlock.Inlines.Add(new Run() {Text = SelectedButtonName, FontWeight = FontWeights.Bold});
If you use the WrapPanel (from the Toolkit) you can do this:
<Grid>
<toolkit:WrapPanel>
<TextBlock Text="Income entries" FontWeight="Bold"/>
<TextBlock Text=" on "/>
<TextBlock Text="21/01/2011" FontWeight="Bold"/>
<TextBlock Text=" Page - "/>
<TextBlock Text="A" FontWeight="Bold"/>
</toolkit:WrapPanel>
</Grid>
(The above is only in a grid to enable code highlighting here in SO and does not need to be for the effect to work.)
I'm using the WPF ribbon control with some success; I'm trying now to use the Ribbon Gallery, making use of the Categories in a data-bound scenario. Here's some example data: -
var data = new[]
{
new { Category = "Sport", Hobby = "Football" },
new { Category = "Sport", Hobby = "Table Tennis" },
new { Category = "Music", Hobby = "Guitar" },
new { Category = "Music", Hobby = "Piano" },
new { Category = "PC", Hobby = "StarCraft 2" },
};
I'm grouping up the data and want to display the items in a gallery, grouped by Category: -
IEnumerable CategorisedHobbies;
CategorisedHobbies = data.GroupBy(d => d.Category).ToArray();
All fairly standard. My XAML looks as follows: -
<ribbon:RibbonGallery ItemsSource="{Binding CategorisedHobbies}">
<ribbon:RibbonGallery.ItemTemplate>
<DataTemplate>
<ribbon:RibbonGalleryCategory Header="{Binding Key}" ItemsSource="{Binding}" MaxColumnCount="1">
<ribbon:RibbonGalleryCategory.ItemTemplate>
<DataTemplate>
<ribbon:RibbonGalleryItem Content="{Binding Hobby}"/>
</DataTemplate>
</ribbon:RibbonGalleryCategory.ItemTemplate>
</ribbon:RibbonGalleryCategory>
</DataTemplate>
</ribbon:RibbonGallery.ItemTemplate>
</ribbon:RibbonGallery>
However, when the app runs, whilst I correctly get the categories showing in the ribbon gallery, each item is just a blank square. I know that the collections are getting bound because I can see that the category size is bigger for e.g. Sport than PC.
If I hard-code the XAML as follows it of course all works: -
Any ideas what I'm doing wrong here? Thanks!
OK, I have gotten this working now "properly". What I had to do was rather than set the DataTemplate was to apply a style for the ItemsContainerStyle on the RibbonGallery.
This style simply needs to be of type RibbonGalleryCategory, and to have a property setter for the ItemsSource. In my case, it was simply {Binding}, plus I had to set the DisplayMemberPath.
I still don't have a full understanding of the hierarchy of the RibbonGallery in terms of how it styles things - but at least this approach works.
UPDATE:
Here's the appropriate XAML for the code example I originally supplied:
<r:RibbonWindow.Resources>
<Style TargetType="r:RibbonGalleryCategory" x:Key="HobbyCategoryStyle">
<Setter Property="Header" Value="{Binding Key}"/>
<Setter Property="ItemsSource" Value="{Binding}"/>
<Setter Property="DisplayMemberPath" Value="Hobby"/>
</Style>
</r:RibbonWindow.Resources>
<r:RibbonMenuButton Label="Example menu button">
<r:RibbonGallery ItemsSource="{Binding CategorisedHobbies}" ItemContainerStyle="{StaticResource ResourceKey=HobbyCategoryStyle}"/>
</r:RibbonMenuButton>
Not sure why but if you assign an ItemsPanel to RibbonGalleryCategory, it works:
<ribbon:RibbonGalleryCategory.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ribbon:RibbonGalleryCategory.ItemsPanel>
I'm new to Silverlight and I am trying to display the contents of a Dictionary in a Graph:
In codebehind:
ChartData = new Dictionary<DateTime, double> {{DateTime.Now, 10},
{DateTime.Now, 20}, {DateTime.Now, 15}};
And in the silverlight XAML:
<toolkit:Chart HorizontalAlignment="Left" Margin="113,168,0,0" Name="chart1"
Title="Chart Title" VerticalAlignment="Top">
<toolkit:LineSeries ItemsSource="{Binding Path=ChartData}"
DependentValuePath="Key" IndependentValuePath="Value">
</toolkit:LineSeries>
</toolkit:Chart>
But this gives "No suitable axis is availible for plotting the dependent value". Suggestions?
Try this data set:-
ChartData = new Dictionary<DateTime, double>() {
{ DateTime.Now.AddDays(-1), 10 },
{ DateTime.Now, 20 },
{ DateTime.Now.AddDays(1), 15 }
};
(I'm surprise your line of code even worked, since it would attempt to add multiple keys with the same value into the dictionary).
Then change your Xaml:-
<toolkit:LineSeries ItemsSource="{Binding Path=ChartData}"
DependentValuePath="Value" IndependentValuePath="Key">
Its would be highly unusual to use a date as a DependentValue, in fact I can't think of a scenario where a DependentValue would anything other than numeric.