首页 \ 问答 \ 如何改变离子导航栏的风格？(How to change the style of ionic nav bar?)

如何改变离子导航栏的风格？(How to change the style of ionic nav bar?)

 我想将ion-nav-bar的背景颜色设置为自定义颜色，所以我做了 
 

<ion-nav-bar class="backarrow-bar" ng-style="{'background-color': rgba(255, 0, 0, 0.5)}" style="background-color:rgba(255, 0, 0, 0.5)">
    <ion-nav-back-button class="button-clear">
        <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
    </ion-nav-back-button>
</ion-nav-bar>

 

 Chrome检查显示生成了以下代码。 但是，酒吧的背景仍然是白色的？ 
 

<ion-nav-bar class="backarrow-bar nav-bar-container" ng-style="{'background-color': rgba(255, 0, 0, 0.5)}" style="background-color:rgba(255, 0, 0, 0.5)" nav-bar-transition="android" nav-bar-direction="forward" nav-swipe="">
        <ion-nav-back-button class="hide"></ion-nav-back-button>
    <div class="nav-bar-block" nav-bar="cached"><ion-header-bar class="backarrow-bar bar bar-header" align-title="left"><button class="button back-button hide buttons button-clear header-item" ng-click="$ionicGoBack()">
            <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
        <span class="back-text"></span></button><div class="title title-left header-item"></div></ion-header-bar></div><div class="nav-bar-block" nav-bar="active"><ion-header-bar class="backarrow-bar bar bar-header" align-title="left"><button class="button back-button buttons button-clear header-item" ng-click="$ionicGoBack()">
            <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
        <span class="back-text"></span></button><div class="title title-left header-item" style="left: 24px;"></div></ion-header-bar></div></ion-nav-bar>


I want to set the background-color of an ion-nav-bar to a custom color so I did
 

<ion-nav-bar class="backarrow-bar" ng-style="{'background-color': rgba(255, 0, 0, 0.5)}" style="background-color:rgba(255, 0, 0, 0.5)">
    <ion-nav-back-button class="button-clear">
        <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
    </ion-nav-back-button>
</ion-nav-bar>

 

And Chrome inspect shows the following code is generated. However, the background of the bar is still white?
 

<ion-nav-bar class="backarrow-bar nav-bar-container" ng-style="{'background-color': rgba(255, 0, 0, 0.5)}" style="background-color:rgba(255, 0, 0, 0.5)" nav-bar-transition="android" nav-bar-direction="forward" nav-swipe="">
        <ion-nav-back-button class="hide"></ion-nav-back-button>
    <div class="nav-bar-block" nav-bar="cached"><ion-header-bar class="backarrow-bar bar bar-header" align-title="left"><button class="button back-button hide buttons button-clear header-item" ng-click="$ionicGoBack()">
            <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
        <span class="back-text"></span></button><div class="title title-left header-item"></div></ion-header-bar></div><div class="nav-bar-block" nav-bar="active"><ion-header-bar class="backarrow-bar bar bar-header" align-title="left"><button class="button back-button buttons button-clear header-item" ng-click="$ionicGoBack()">
            <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
        <span class="back-text"></span></button><div class="title title-left header-item" style="left: 24px;"></div></ion-header-bar></div></ion-nav-bar>


原文：https://stackoverflow.com/questions/37779546
更新时间：2024-01-18 19:01

最满意答案

 您应该将所选项目转换为正确的类型。 
 

Country selectedCountry = (Country)GridCoutry.SelectedItem;

 

 否则，将SelectedItem与您的类/ viewmodel绑定的另一个选项 
 

<Grid DataContext="<ViewModel Name>">
    <DataGrid ItemsSource="{Binding Path=Country}"
              SelectedItem="{Binding Path=SelectedCountry, Mode=TwoWay}"/>
</Grid> 


You should cast your selected item to correct type.
 

Country selectedCountry = (Country)GridCoutry.SelectedItem;

 

Otherwise another option to bind SelectedItem with your class/viewmodel
 

<Grid DataContext="<ViewModel Name>">
    <DataGrid ItemsSource="{Binding Path=Country}"
              SelectedItem="{Binding Path=SelectedCountry, Mode=TwoWay}"/>
</Grid>

相关问答

更多

  • WPF Datagrid。(WPF Datagrid. Get the values of each cell of the selected row)[2021-12-03]

    在WPF行中表示列表中的对象，而列是对象的属性。 这取决于DataGrid.ItemsSource是什么。如果您的ItemSource是BindedClass的数组，您可以通过以下方式获取选定的对象： BindedClass bc = (BindedClass)dataGridControl.SelectedItem; var prop1 = bc.Prop1; var prop2 = bc.Prop2; In WPF rows represent objects in a list and column ...

  • WPF DataGrid选择行风格(WPF DataGrid selected row style)[2022-03-16]

    在DataGrid上使用CellStyle和RowStyle 。 DataGridCell和DataGridRow都有IsSelected属性，可以在Trigger使用，以查明它们是否被选中。 以下的东西应该做的诀窍：